What are the differences between JavaScript's Array.forEach() and Array.map()?
Benjamin C

JavaScript'sArray.forEach() andArray.map() are both array methods used to iterate over array elements and perform operations on them, but they have some differences in functionality and usage. Here are the key differences between them: 1. Return value: -Array.forEach() does not return a value. It is used for iterating over array elements and performing side effects, such as modifying the elements or interacting with external resources. -Array.map() returns a new array containing the results of applying a provided callback function to each element of the original array. It creates a new array based on the return values of the callback function. 2. Purpose: -Array.forEach() is typically used when you want to iterate over the array elements and perform operations on them without the need to create a new array. It is useful for executing a function for each element, such as updating the DOM or logging values. -Array.map() is used when you want to transform each element of an array and create a new array with the transformed values. It is commonly used for data manipulation or when you need to create a new array based on the original array. 3. Callback function: - Both methods accept a callback function as a parameter. - The callback function forArray.forEach() takes three arguments: the current element, the index, and the array itself. It can modify the elements in-place, but any changes made to the array itself will persist. - The callback function forArray.map() also takes three arguments: the current element, the index, and the array itself. It should return a value that will be included in the new array. The original array remains unchanged. 4. Usage: -Array.forEach() is useful when you want to perform an action on each element of an array, such as logging the elements, updating the DOM, or making network requests. -Array.map() is useful when you want to transform the elements of an array into a new array, such as performing calculations, formatting data, or extracting specific properties. Here are some examples to illustrate the differences:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const array = [1, 2, 3];

// Using Array.forEach()
array.forEach((element, index) => {
  console.log(`Element at index ${index}: ${element}`);
});
// Output:
// Element at index 0: 1
// Element at index 1: 2
// Element at index 2: 3

// Using Array.map()
const squaredArray = array.map((element) => {
  return element ** 2;
});

console.log(squaredArray); // Output: [1, 4, 9]

In this example,Array.forEach() is used to log each element of the array, whileArray.map() is used to create a new array with the squared values of the original array elements. Choose the appropriate method based on your specific use case. If you need to iterate over array elements without creating a new array, useArray.forEach(). If you need to transform the elements and create a new array, useArray.map().

Similar Questions