Understanding Javascript Array Series VIII - Array Loops & Iteration Part V
Tags: javascript, beginners, webdev
Published: 2019-10-08 20:28:25

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

{% link https://dev.to/nedyudombat/understanding-javascript-array-series-iv-array-loops-iteration-part-iii-4f38 %}

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:
```javascript
  // 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](https://dev.to/nedyudombat/understanding-javascript-array-series-iv-array-loops-iteration-part-i-334j)
```javascript

  // 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:
```javascript

  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. :stuck_out_tongue_winking_eye:

* 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?](https://dev.to/nedyudombat/understanding-javascript-array-series-i-what-is-an-array-l1i)
* [Alternate ways of Creating an Array.](https://dev.to/nedyudombat/understanding-javascript-array-series-ii-alternate-ways-of-creating-an-array-26c8)
* [Array Properties](https://dev.to/nedyudombat/understanding-javascript-array-series-iii-array-properties-43co)
* [Array Loops & Iteration Part I] (https://dev.to/nedyudombat/understanding-javascript-array-series-iv-array-loops-iteration-part-i-334j)
* [Array Loops & Iteration Part II] (https://dev.to/nedyudombat/understanding-javascript-array-series-iv-array-loops-iteration-part-ii-115o)
* [Array Loops & Iteration Part III] (https://dev.to/nedyudombat/understanding-javascript-array-series-iv-array-loops-iteration-part-iii-4f38)
* [Array Loops & Iteration Part IV] (https://dev.to/nedyudombat/understanding-javascript-array-series-vii-array-loops-iteration-part-iv-3nb8)

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

Thank you for reading. :thumbsup: