ref – https://programmingwithmosh.com/javascript/whats-the-difference-between-foreach-and-map-in-javascript/
Array.prototype.forEach
Anytime you want to iterate through the items in an array, the first thing that comes to our mind in any programming language is the for loop. forEach() in JavaScript is an interesting alternative to the regular for loops.
The forEach() iterates through the elements in the array. It calls a provided callback function once for each element in the array in ascending order.
The callback function accepts three arguments:
value of the element
index of the element
array object
Let’s take a look at an example to see how forEach() works.
|
1 2 3 4 5 |
let temp = [1, 4, 9]; temp.forEach((item, index) => { return temp[index] = item * 3; }); // temp is now [3, 12, 27] |
Array.prototype.map
The map() method creates a new array with the results of calling a provided function on every element in the calling array. map() calls a provided callback function once for each element in an array, in order, and constructs a new array from the results.
The callback accepts three arguments:
- value of the element
- index of the element
- array object
You may have used the map() function before. It qualifies as a higher-order function, because it takes in a callback function as an input argument.
|
1 2 3 4 5 6 |
let numbers = [1, 4, 9]; let triples = numbers.map((item) => { return item * 3; }); // numbers is still [1, 4, 9] // triples is [3, 12, 27] |
In the example above, we have an array of numbers and creating a new array using the map(). The map() takes a function as an argument. The argument item within the function will automatically be assigned from each element of the array as map() loops through the original array.
What is the difference?
If you notice closely, although they look very similar there is a fundamental difference between forEach() and map() functions.
- forEach() changes the original array
- whereas map() returns a new array, without mutating the original array.
So which one should you pick? It depends on what you are trying to do with the array.
Note: I always prefer to use map() over forEach().
If you are looking to make changes to the array, map() is preferable. map() ensures that it doesn’t change/mutate the original array, and returns a new array instead.
forEach() is used when you want to iterate through the array and allows a callback function that mutates the original array unlike map(). If you are not looking to transform the array items, but just need to iterate through it and print them or do other actions with them, then forEach() could can be used.
Which one is faster
?
So which one is faster? There seems to be a very small difference between forEach() and map() with respect to speed. map() is faster, but these are so miniscule that it shouldn’t affect your application’s performance significantly. You can almost always use map() and other array methods like filter() and reduce() instead of using forEac
Which is better?
The original array that the map() function iterates through is immutable. This means it cannot be changed, and the map() has to return a new array with the updated items. This is a big benefit since your original array is guaranteed to remain the same and not change after the iteration. Incase your code needs the original array elsewhere, map() will be the best option.
h().