The difference between map() and forEach() in JavaScript (front-end interview questions)

If you already have experience using JavaScript, you may already know these two seemingly identical methods:

Array.prototype.map()和Array.prototype.forEach()。

So, what is the difference between them?
definition

Let's first take a look at the definition of Map and ForEach on MDN:

forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。

map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来(creates a new array with the results of calling a provided function on every element in the calling array)。

到底有什么区别呢？forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。
示例

An array is provided below. If we want to double each element, we can use map and forEach to achieve the goal.

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

ForEach

Note that forEach will not return a meaningful value.

We directly modify the value of arr in the callback function.

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

执行结果如下：
?
1
	
// arr = [2, 4, 6, 8, 10]

Map

let doubled = arr.map(num => {
  return num * 2;
});

执行结果如下：
	
// doubled = [2, 4, 6, 8, 10]

Execution speed comparison

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

As you can see, the execution speed of forEach() on my computer is 70% slower than map(). The execution result of each person's browser will be different. You can use the following link to test it: Map vs. forEach-jsPref.

JavaScript is too smart (gui) to live (yi), you don't know if there is a bug, you might as well connect to Fundebug online real-time monitoring.

Functional perspective

If you are used to programming with functions, you definitely like to use map(). Because forEach() will change the value of the original array, and map() will return a brand new array, the original array is not affected.

Which is better?

It depends on what you want to do.

forEach is suitable when you do not intend to change the data, but just want to do something with the data-such as storing it in a database or printing it out.

let arr = [ 'a' , 'b' , 'c' , 'd' ];
arr.forEach((letter) => {
  console.log(letter);
});
// a
// b
// c
// d

map() is suitable when you want to change the data value. Not only is it faster, but it also returns a new array. The advantage of this is that you can use composition (combination of map(), filter(), reduce(), etc.) to play more tricks.

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

We first use map to multiply each element by 2, and then filter out those elements greater than 5. The final result is assigned to arr2.

Core points

What can be done with forEach() is also possible with map(). The reverse is also true.

map() will allocate memory space to store the new array and return it, forEach() will not return data.

forEach() allows callback to change the elements of the original array. map() returns a new array.