Difference between Map and ForEach in JS, jsmapforeach

Difference between Map and ForEach in JS, jsmapforeach

If you have experience using JavaScript, you may already know the two seemingly identical methods: Array. prototype. map () and Array. prototype. forEach ().

So what are the differences between them?

Definition

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

ForEach (): Execute the provided function (executes a provided function once for each array element) for each element ).

Map (): Creates a new array, each element is obtained by calling the function provided by each element in the array (creates a new array with the results of calling a provided function on every element in the calling array ).

What is the difference? The forEach () method does not return execution results, but undefined. That is, forEach () modifies the original array. The map () method returns a new array.

Example

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

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

ForEach

Note that forEach does not return meaningful values.

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

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

The execution result is as follows:

// arr = [2, 4, 6, 8, 10]

Map

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

The execution result is as follows:

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

Comparison of execution speed

JsPref is a good website for comparing the execution speed of different JavaScript Functions.

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

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

JavaScript tailing (gui) active (yi), you do not know if there is a BUG, you may wish to access Fundebug online real-time monitoring.

Functional understanding

If you are used to programming functions, you certainly prefer 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 one is better?

Depends on what you want to do.

ForEach is suitable for scenarios where you don't want to change the data, but want to do something with the data-for example, store the data in the database or print it out.

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

Map () is applicable when you want to change the data value. It is not only faster, but also returns a new array. This advantage is that you can use composition (map (), filter (), reduce () and other combinations) to create more patterns.

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

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

Key Points

It can be done with forEach (), and map () is the same. This is also true.

Map () will allocate memory space to store new arrays and return, and forEach () will not return data.

ForEach () allows callback to change the elements of the original array. Map () returns a new array.