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

#javascript #beginners #webdev

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

#javascript #webdev #html #beginners

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. 👍