What are the differences between Array.forEach() and Array.map() in JavaScript?
Richard W

TheArray.forEach() andArray.map() are both methods available on JavaScript arrays, but they have distinct purposes and behaviors. Here are the differences between the two: 1. Purpose and Return Value: -forEach(): It executes a provided callback function once for each element in the array. It does not return a new array. -map(): It creates a new array by calling a provided callback function on each element in the array. It returns the resulting array. 2. Modification of Original Array: -forEach(): It does not modify the original array. Any modifications made to the elements within the callback function will affect the original array. -map(): It does not modify the original array. Instead, it creates a new array with the results of the callback function applied to each element. The original array remains unchanged. 3. Return Value from Callback Function: -forEach(): The return value of the callback function withinforEach() is ignored. It is typically used for side effects or performing actions on each element. -map(): The return value of the callback function withinmap() is used to populate the resulting array. Each returned value becomes the corresponding element in the new array. 4. Use Cases: -forEach(): It is useful when you want to iterate over an array and perform some action or side effect for each element, such as logging, updating UI, or calling another function. -map(): It is suitable when you want to transform each element of an array into a new value and collect those transformed values into a new array, such as manipulating data, creating a new data structure, or extracting specific properties. Here's an example that demonstrates the differences betweenforEach() andmap():

1
2
3
4
5
6
7
8
9
10
11

const numbers = [1, 2, 3, 4, 5];

// forEach
numbers.forEach((num) => {
  console.log(num * 2); // Output: 2, 4, 6, 8, 10
});

// map
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

In this example, theforEach() method is used to iterate over thenumbers array and log each element multiplied by 2 to the console. It performs the action but does not return a new array. Themap() method is then used on the samenumbers array to create a new array,doubledNumbers, where each element is multiplied by 2. The resulting array is logged to the console. It's important to note that bothforEach() andmap() execute the provided callback function for each element of the array in order. However,forEach() is primarily used for its side effects, whilemap() is used to create a new array based on the transformation of each element. Consider the specific requirements of your code and choose the appropriate method accordingly.

Similar Questions