Hi Readers
In this blog, let's discuss the behavior of two very prevalent array iteration methods, map() and forEach(). We'll go over both how and why they are used as well as the differences between them. Before we get into the functionality of the map() and forEach() methods, let's first review what arrays are in the first place.
What is an array?
An array is a type of object that is used to store data. They contain values in a collection similar to objects but don't have named keys to access the information. Instead, each piece of data in the array is assigned an index: a number starting from 0 and increasing through the last element of the array. To access any element of an array, you can use the index that correlates to the value you want to access.
Below is an example of the syntax used for an array.
const myArray = [5, 10, 15, 20, 25]
console.log(myArray)
//Output: [ 5, 10, 15, 20, 25 ]
console.log(myArray[0])
//Output: 5
console.log(myArray[3])
//Output: 20
What is Array Iteration?Why do we use it?
Array iteration is when we use a method to pass through an array and interact with each element using a function that executes changes. These methods use a callback function to act on every item in an array to achieve a specific goal. Depending on the aim of the user's iteration, the method, and function used will vary.
What are the methods?
.forEach
The forEach() method uses a callback function once on each element in an array. This method changes the values of the existing array elements according to the called function. The forEach() method doesn’t return anything.
.map
The map() method is similar to the forEach() method in that it uses a callback function once on each element in an array. However, the map() method creates a new array with the resulting changed elements. This method doesn't change the original array and also doesn't execute the callback function for array elements without values.
Syntax
forEach() method:
randomArray.forEach(randomFunction(element, index, array))
The function uses the following arguments:
element - the current element being targeted in the array
index - the index of the current element being targeted in the array
array - the array the forEach() method is called on
To break down what's happening above, 'randomFunction' is executed "for each" element in 'randomArray'. This will result in 'randomArray' being altered due to whatever action 'randomFunction' took.
map() method:
randomArray.map(randomFunction(element, index, array))
The function uses the following arguments:
element - the current element being targeted in the array
index - the index of the current element being targeted in the array
array - the array the map() method is called on
To break down what's happening above, we "map" through 'randomArray', and 'randomFunction' is executed on every element, thus resulting in a new array returned containing the "finished product."
Examples
Below is an example and analysis of the forEach() method
const smallNumbers = [1, 2, 3, 4, 5]
console.log(smallNumbers.forEach(value => value * 100))
//Output: undefined
In the code above, we declare an array called 'smallNumbers'. This array has a length of 5, and an index ranging from 0 to 4. In the second line of our code we are implementing the forEach iteration method to take some action on our array. The action we want to take is to multiply each element of the array by 100 as shown by the arrow function. However, the output is undefined when we log it. Why is this? It's important to remember that the forEach() method doesn't have a return value. Because of this, if we want to log the new values, we would need our 'console.log' to exist within the function forEach is acting with.
smallNumbers.forEach(function (value) {
console.log(value * 100)
})
/*
Output:
100
200
300
400
500
*/
As you can see, we now have an Output in our log showing the "finished product" we wanted to show up earlier. Our console.log doesn't have to deal with the forEach() method returning undefined. When the iteration takes place and the function executes for each element, the current value is multiplied by 100 and immediately logged.
Below is an example and analysis of the map() method
const primeNumbers = [2, 3, 5, 7, 11, 13];
const notPrimeNumbers = primeNumbers.map(myFunction);
function myFunction(value) {
return value * 2;
}
console.log(notPrimeNumbers)
//Output: [ 4, 6, 10, 14, 22, 26 ]
In the code above, we declare an array called primeNumbers. This array has a length of 6 and an index ranging from 0 to 5. In the second line, we declare another variable called 'notPrimeNumbers' which possesses the map() method and the invocation of 'myFunction'. Unlike the forEach() method, map() has a return value, so our 'notPrimeNumber' will have some value as well. The decleration of 'myFunction' is just below the variable declerations. It takes in only the value of the current element as an argument, and multiplies it by two. When we finally log our 'notPrimeNumbers' variable containing the iteration method, we are given an output showing an entirely new array. This brand new array is a collection of numbers that are no longer prime after being changed. The new array has a length of 6, the same length as our original array.
Wrapping up
Iteration methods are very useful, in that they allow us to dynamically interact and change our data in a myriad of ways. We covered two methods called map() and forEach() and the differences between the two. In terms of syntax, they are very similar, but their behavior is slightly different when you break it down. The forEach() method uses a callback function to interact with each element in the array and doesn't return anything. The map() method uses a callback function to interact with each element but creates a new array containing those changed values, ready to be used elsewhere in the code.
Sources/Links