ForEach and Map

In JavaScript, forEach and map are two of the most popular methods to work with arrays. The primary purpose of both these methods is to iterate through arrays. Although they may look almost identical, there are certain differences between them. map is used to transform each element of an array, while forEach is used to run a function on each element without changing the array.

Understand the forEach method

The forEach method allows you to execute a function by iterating through each element of an array. It’s important to note that the forEach method doesn’t return anything,and thus, if you try to get the return value of the forEach method, you will get undefined Instead, it allows you to modify the values of an existing array by applying the callback function on each element of an array. So it allows you to modify the source array itself, it’s a mutator method.

let’s have a quick look at the following example to understand how the forEach method works.

1-//an array of numbers
2-let numberArray = [1, 2, 3, 4, 5];

3-//output the square of each number
4-let returnValue = numberArray.forEach(num => 
5- console.log(`${num} x ${num} = ${num * num}`)  //interpolation method
6-);

7-//the array hasn't changed
8-console.log(numberArray);
9-console.log(returnValue);

Output

 Output of Line no-5        Output of Line no-9
1 x 1 = 1                                                 undefined
2 x 2 = 4
3 x 3 = 9
4 x 4 = 16
5 x 5 = 25

Output of Line no-8
   [1,2,3,4,5]

Output of Line no-9
 undefined

As you can see, we’re calculating the square of all elements of an array. The forEach method is called with each element, and we log its square. The return value of this helper method is ignored, and the original array doesn't change. The return value of forEach is always undefined.

Understand the Map Method

The map method is very similar to the forEach method—it allows you to execute a function for each element of an array. But the difference is that the map method creates a new array using the return values of this function. map creates a new array by applying the callback function on each element of the source array. Since map doesn't change the source array, we can say that it’s an immutable method

Let’s discuss the example that we discussed in the previous section with the map counterpart

1-let numberArray = [1, 2, 3, 4, 5];

2-//output the square of each number
3-let returnValue = numberArray
4-.map((num) => num * 2)
5- .map((num) => num.toString())
6 -.map((string) => "$"+string);

7-//view the results
8-console.log(numberArray);
9-console.log(returnValue);

Output of Line No-8
[1,2,3,4,5]

Output of Line No-9
["$2","$4","$6","$8","$10"]

Differences Between the map and forEach Methods

The main difference between map and forEach is that the map method returns a new array by applying the callback function on each element of an array, while the forEach method doesn’t return anything.

You can use the forEach method to mutate the source array, but this isn't really the way it's meant to be used. Instead, it's great for when you need to do some action with each element of the array.

On the other hand, the map method is used for creating a new array, and thus, it’s chainable. You can call a number of map operations one after the other.

The forEach method doesn’t return anything, so you can’t chain it with any other methods—it’s not chainable.

Which One Should I Use, map or forEach?

how should you decide whether to use the map or forEach method?

If you’re planning to alter the array elements by applying a function, you should use the map method, since it doesn’t modify the original array and returns a new array. In this way, the original array is kept intact. On the other hand, if you want to loop through all the elements of an array and don’t need a returned array, use the forEach method.

Conclusion

we discussed two useful methods in JavaScript: map and forEach. We went through the differences between them.after reading this article hope to be all the doubt will be null.