In the previous article, I talked about iterating over arrays using the filter
array method. You can check it out below:
Understanding Javascript Array Series VI - Array Loops & Iteration Part III
Nedy Udombat ・ Oct 4 '19 ・ 4 min read
Today, I will talk about using forEach to iterate over arrays.
ForEach
The forEach()
method executes a specified function once for each element in an array, in the way they are ordered. You are probably wondering if this is not similar to the usual for ...
loop. The difference is that in for ...
loops you can specify the number of times you want the iteration to run whereas when using the forEach
loop on default the loops runs as many times as there are elements in the array.
Let's take a look at the syntax:
// syntax
arr.filter(callback([currentValue], [arrayIndex], [arr]));
[currentValue]: This is the current item in the array that is being processed. After the procession, the current value becomes the value of the next element in the array.
[arrayIndex]: This is the index of the current value in the array. This also changes after the current value has been processed.
[arr]: This is the array being iterated over.
[callback]: This is basically a function to be performed on each element of the array. It accepts the first three items (currentValue, index, and array) as arguments.
Let's take a look at this example from this previous article
// Log items of the array to the console
const playersArray = ["Messi", "Ronaldo", "Kante", "Nedy"];
playersArray.forEach(player => console.log(player));
// "Messi"
// "Ronaldo"
// "Kante"
// "Nedy"
The example above makes use of the player
argument in the callback and the currentValue. For every iteration, the value of player
becomes the next element in the array.
Here is another example where we use the forEach
loop to play with two arrays to produce an object:
const playersArray = ["Messi", "Ronaldo", "Kante", "Nedy"];
const clubsArray = ["Barcelona", "Juventus", "Chelsea", "Barcelona-Alt"];
const playersClubMap = {};
playersArray.forEach((player, index) => {
const key = clubsArray[index];
playersClubMap[key] = player;
});
console.log(playersClubMap);
// {
// Barcelona: "Messi",
// Barcelona-Alt: "Nedy",
// Chelsea: "Kante",
// Juventus: "Ronaldo"
// }
Things to note about the forEach()
method:
There is no way to break a
forEach
loop in the middle of an iteration except you through an exception. 😜This method does not mutate the array it is being called upon, although the callback function can do so.
This method doesn't return a boolean except explicitly stated, hence it cannot be chained.
If an item is deleted from the array while the iteration is in process, it will not be processed.
If an element is added to the array after the iteration has begun, it will not be processed.
Conclusion
Array.forEach()
is great when you want to perform a function on every element of the array, but if you want to do something different like iterating a certain number of times, you should consider using for ...
, for ... in
or for ... of
loops.
Got any other instances for the use of the forEach
function? Please do well to share it in the comment section.
That's all for today, tomorrow we will talk about another set of functions used in array Iteration.
Here is the link to the other articles on this Array series written by me:
- What is an Array?
- Alternate ways of Creating an Array.
- Array Properties
- Array Loops & Iteration Part I
- Array Loops & Iteration Part II
- Array Loops & Iteration Part III
- Array Loops & Iteration Part IV
Got any question, addition or correction? Please leave a comment.
Thank you for reading. 👍
Top comments (10)
Great thank you
Thank you @laurentsebou
Cool read
Thank you @jaycodist
Nice 😁
Thanks @__naaza
Nice article Nedy and great work keeping up the consistency with your writing! 🙌
Thanks @frontendmentor
Thank You for this post.
You are welcome @emex4gman