The two most commonly used functions in Javascript for iterating arrays are forEach and map. Many people might think that these two functions work the same way, both iterating over and printing each item of the array. This article will introduce the differences between forEach and map, and therefore deepen your understanding of both functions.

forEach

The forEach method is a higher-order function because it takes a callback as its argument. It is used to iterate over a list of elements and return undefined. The callback function takes three arguments (element, value, and index).

Take a look at the following code example:

const arrAges = [10, 20, 30, 40]; // ES5:const es5Result = arrAges.forEach(function (item) { return item * 2; }); console.log(es5Result); // undefinedconsole.log(arrAges); // [ 10, 20, 30, 40 ]// ES6:const es6Result = arrAges.forEach((item) => item * 2); console.log(es6Result); // undefinedconsole.log(arrAges); // [10, 20, 30, 40]Copy the code

Copy the code

ForEach forEach forEach forEach forEach forEach forEach forEach forEach forEach forEach

The forEach function does not accept additional methods attached to it. Take a look at the following example:

const es6Result = arrAges.forEach((item) => item * 2).reduce((a, b) => a + b); // Exception, Cannot read property 'reduce' of undefinedconsole.log(es6Result);Copy the code

Copy the code

map

The map function is used to iterate over array elements. It takes a callback function as an argument and returns a new array and element.

The callback function takes three arguments (element, value, and index).

Take a look at the following code example:

const arrAges = [10, 20, 30, 40]; // ES5:const es5Result = arrAges.map(function (item) { return item * 2; }); console.log(es5Result); // [ 20, 40, 60, 80 ]// ES6:const es6Result = arrAges.map((item) => item * 2); console.log(es6Result); // [20, 40, 60, 80]Copy the code

Copy the code

As a result, using the map function on the array returns a new array of elements with a double value. As you can see from the above results, other methods can be appended to the results of the map function execution.

The following code:

const arrAges = [10, 20, 30, 40]; // ES6:const es6Result = arrAges.map((item) => item * 2).reduce((a, b) => a + b); console.log(es6Result); / / 200Copy the code

Copy the code

In the example above, the reduce function is applied to the array of results after the map function is executed to add the values of all the elements to get a result. For more information about map and Reduce, see “Understanding the Front End: javascript Array includes and Reduce”.

The difference between

From the above example, you can see that this is a little different.

forEach

  • Return undefined after traversal.

  • It does not accept additional methods.

map

  • Returns a new array after traversal

  • It accepts additional functions

conclusion

As you can see above, these are the differences between forEach and Map. Personally, I prefer to use the map method because it returns a new and different array. Of course, if you don’t need the returned array, it’s better to use forEach.