What are the differences between JavaScript's Array.forEach() and Array.map() methods when iterating over arrays?
Davide S

The Array'sforEach() andmap() methods in JavaScript are both used for iterating over arrays, but they have some key differences in terms of their functionality and the values they return. 1. Purpose and Functionality: -forEach(): It iterates over each element of the array and executes a provided callback function for each element. The main purpose offorEach() is to perform an action or side effect for each array element. -map(): It iterates over each element of the array and executes a provided callback function for each element. The main purpose ofmap() is to transform each element of the array and create a new array with the transformed values. 2. Return Value: -forEach(): It doesn't return anything. The return value is alwaysundefined.forEach() simply iterates over the array and executes the callback function for each element. -map(): It returns a new array with the results of calling the provided callback function on each element. The return value of the callback function is used as the corresponding element in the new array. 3. Side Effects: -forEach(): It allows side effects since it is primarily used for performing an action or operation on each element, such as modifying the array, updating external variables, or performing console logging. -map(): It is meant for pure transformations. It doesn't modify the original array but creates a new array with the transformed values based on the callback function. 4. Mutability: -forEach(): It doesn't create a new array and directly modifies the existing array if any changes are made within the callback function. However, modifying the array insideforEach() can lead to unintended consequences and should be used with caution. -map(): It creates a new array and returns it, leaving the original array intact. The original array remains unmodified. 5. Usage Scenarios: -forEach(): It is suitable when you want to perform an action or side effect for each element of an array, such as logging, updating a UI, or making API calls. -map(): It is useful when you need to transform each element of an array into a new value, such as converting data types, applying calculations, or extracting specific properties. Here's an example to illustrate the differences:

1
2
3
4
5
6
7
8
9
10
11
12

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

// Using forEach()
numbers.forEach((num) => {
  console.log(num * 2); // Perform side effect: logging
});

// Using map()
const doubledNumbers = numbers.map((num) => num * 2); // Transformation

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

In the above example,forEach() is used to perform a side effect of logging each number multiplied by 2. On the other hand,map() is used to create a new arraydoubledNumbers where each element is the original number multiplied by 2. To summarize,forEach() is primarily used for iterating over an array and performing actions or side effects, whilemap() is used for transforming each element of an array and returning a new array with the transformed values.

Similar Questions