Map vs. ForEach function in JavaScript.

ForEach executes a provided function once for each element present in the array. The map creates a new array with the results of a provided function for every element in the calling array.

What exactly this means?

Well, the forEach() method doesn’t return anything ("undefined"). It calls a provided function on each element in the array. This callback is allowed to change the calling array.

Meanwhile, the map() method will also call a provided function for every element in the array. The difference is that the map() utilizes return values and returns a new Array of the same size.

Code Examples:-

Consider the below-given array. If we wanted to double each element in the array, we can use both map or forEach.

let array = [1, 2, 3, 4, 5];

ForEach:

Note that you would never return from a forEach method as the return values are simply discarded:

array.forEach((num, index) => {
    return arr[index] = num * 2;
});
Result:

 array = [2, 4, 6, 8, 10]

Map:

let doubled = array.map(num => {
    return num * 2;
});
Result:

doubled = [2, 4, 6, 8, 10]

Speed Considerations:-

we can use jsPerf website for testing the speed of different JavasScript methods and functions.

Here are the results of forEach() vs map() test:

As you can see, the forEach() method was more than 70% slower than map() method.

Functional Considerations:-

It is important to understand that using map() may be preferable if you favor functional type programming. This is because forEach() affects and change whole original Array, whereas map() returns a new Array — the original array unchanged is that case.

Which is better?

That depends on what requirement to accomplish.

forEach() may be preferable when you’re not trying to change the values in your array, but instead, want to just do something else — like saving it to a database or logging it :

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
    console.log(letter);
});
// a
// b
// c
// d
And map() might be preferable when changing or altering the original data. Not only is it faster but it returns a entire new Array. This means we can do other things like chaining on other methods ( map(), filter(), reduce(), etc.)

let array = [1, 2, 3, 4, 5];
let array2 = array.map(number => number * 2).filter(number => number > 5);
// array2 = [6, 8, 10]
What we’re doing above is first mapping over array and multiplying every element in the array by 2 times. After this, we filter through the same array and only save the elements that are more than 5. This gives us a final arr2 of [6,8,10].

Key Takeaways:- 

We can do anything with forEach() and same we can do with map().
map() allocates memory and return values. forEach() throws return values and always returns undefined.
forEach() will allow a callback method to change the current array. map() will instead return an entirely new array.