Hello Everyone! Welcome back to another episode on the Array method series. If you are new to the series, do well to check out the previous articles:
As a developer, you must have come across or heard about the JavaScript array.map() and forEach() method, two of which are widely used in programming. In this article, we will discuss them, their differences with code examples, and when to use each one cause of their seeming similarity. I'm writing this article for myself for future references as well as teach others and I hope it helps you reading it understand the concepts behind them. So, let's begin
Definitions
Array.map()
This method creates a new array with the results of calling a function for every array element(non-mutating method). This has to be one major difference it has from the forEach method as the original array is left untouched and most times, its tricky to remember. It does not execute a function for arrays with empty values.
Array.forEach()
This javascript method doesn't return anything but rather calls a function once for each element in an array. The called function accepts up to three arguments
Syntax
array.map(callback(currentValue, index, arr), thisValue)
array.forEach(callback(currentValue, index, arr), thisValue)
Surprisingly, the two methods have the same syntax. This further creates confusion as to when to use each method. Let's walk through the syntax and see what each parameter does
Arguments
- The callback parameter holds the function to be called for each element in the array
- The currentValue parameter holds the value of the current element in the array. It is required whenever we want to use the forEach() method
- The index parameter holds the array index of the current element in the array starting from index 0. This parameter is optional.
- The arr parameter holds the array object in which the current value belongs to. It is optional as well and always required
- The thisValue parameter is optional and holds the value to be passed to the function as its 'this' value. If it empty, 'undefined' will be passed as its 'this' value.
Let's look at some code examples to further explain our definitions.
let numbers = [1,2,4,5];
let newarray = numbers.map(function(num){
return num * 2
})
console.log(newarray) //returns [2, 4, 8, 10]
In the above snippet, we looped through each array element and multiplied it by 2. In the end, we have a new array with the same size as the original array.
let numbers = [1,2,3,4,5,6,7,8,9,10]
numbers.forEach(function(value, index){
console.log('Value is ' + value + ' and the index is ' + index)
})
// returns Value is 1 and index is 0
// Value is 2 and the index is 1
// Value is 3 and the index is 2
// Value is 4 and the index is 3
// Value is 5 and the index is 4
// Value is 6 and the index is 5
// Value is 7 and the index is 6
// Value is 8 and the index is 7
// Value is 9 and the index is 8
// Value is 10 and the index is 9
Here, we iterated over every element with its index in the array and printing them to the console.
let numbers = [1,2,3,4,5,6,7,8,9,10]
let total = 0
numbers.forEach(function(value){
total += value
})
console.log(total) // returns 55
Another example where we get the sum of all elements in the array. Each element in the array is added and storing the result in the total variable.
Usages
We have walked through the method definitions with their code examples. But what about knowing which one to use at a time since they are similar? If you want to just iterate the array and perform some functions on the array elements, forEach() is recommended. But if you want to transform the array elements or filter the array after modifying, the map() method should be your go-to as it will return a new array and you can perform operations on them.
Conclusion
We have the key differences and usages of the two JavaScript methods. I hope you now understand how they work. If you like this article, please leave an emoji and share it. Thanks for reading.