DEV Community

Nedy Udombat
Nedy Udombat

Posted on • Updated on

Understanding Javascript Array Series VIII - Array Loops & Iteration Part V

In the previous article, I talked about iterating over arrays using the filter array method. You can check it out below:

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:

Got any question, addition or correction? Please leave a comment.

Thank you for reading. 👍

Oldest comments (10)

Collapse
 
emex4gman profile image
Ibebugwu Chukwuemeka

Thank You for this post.

Collapse
 
nedyudombat profile image
Nedy Udombat

You are welcome @emex4gman

Collapse
 
__naaza profile image
Naza

Nice 😁

Collapse
 
nedyudombat profile image
Nedy Udombat

Thanks @__naaza

Collapse
 
laurentsebou profile image
Badus

Great thank you

Collapse
 
nedyudombat profile image
Nedy Udombat • Edited

Thank you @laurentsebou

Collapse
 
jaycodist profile image
Johnson Ubaezuonu

Cool read

Collapse
 
nedyudombat profile image
Nedy Udombat

Thank you @jaycodist

Collapse
 
mattstuddert profile image
Matt Studdert

Nice article Nedy and great work keeping up the consistency with your writing! 🙌

Collapse
 
nedyudombat profile image
Nedy Udombat