I prefer Map to Haskell.

  • JavaScript — Map vs. ForEach – What’s the difference between Map and ForEach in JavaScript?
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper. In addition, the copyright of this article belongs to the original author, and translation is for study only.

If you already have experience with JavaScript, you probably already know these two seemingly identical methods: array.prototype.map () and array.prototype.foreach ().

So, what’s the difference?

define

Let’s first look at the MDN definitions for Map and ForEach:

  • forEach()Executes a provided function once for each array element.
  • map(): Create a new array, Each element is created by creating a new array with the results of calling a provided function on every element in the Calling an array).

What’s the difference? The forEach() method does not return the result of execution, but undefined. That is, forEach() will modify the original array. The map() method takes a new array and returns it.

The sample

An array is provided below, and if we want to double each element in it, we can use map and forEach to do so.

let arr = [1.2.3.4.5];
Copy the code

ForEach

Note that forEach does not return meaningful values. We modify the value of arR directly in the callback function.

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

The result is as follows:

// arr = [2, 4, 6, 8, 10]
Copy the code

Map

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

The result is as follows:

// doubled = [2, 4, 6, 8, 10]
Copy the code

Execution speed comparison

JsPref is a great site for comparing the execution speed of different JavaScript functions.

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

As you can see, forEach() is 70% slower than map() on my computer. Everyone’s browser will execute differently. You can test this by using the following link: Map vs. foreach-jspref.

JavaScript is too clever (GUI) to work (YI). If there is a BUG, you don’t know it.

Functional understanding

If you’re used to using functions for programming, you’ll like to use map(). Because forEach() changes the value of the original array, map() returns a new array, leaving the original array untouched.

Which is better?

Depends on what you want to do.

ForEach is great when you don’t want to change the data, but just want to do something with it — like store it in a database or print it out.

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

Map () is used when you want to change data values. Not only is it faster, but it returns a new array. The advantage of this is that you can use composition (map(), filter(), reduce(), etc.) to play with more variety.

let arr = [1.2.3.4.5];
let arr2 = arr.map(num= > num * 2).filter(num= > num > 5);
// arr2 = [6, 8, 10]
Copy the code

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

The core points

  • Can be usedforEach()Do it,map()Same thing. The reverse is also true.
  • map()Allocates memory to store the new array and returns,forEach()No data is returned.
  • forEach()allowcallbackChanges the elements of the original array.map()Returns a new array.

Copyright statement: reprint please indicate the author Fundebug and this address: https://blog.fundebug.com/2018/02/05/map_vs_foreach/