JavaScript ES6 – Array forEach method

JavaScript array forEach() is a method that exists on the Array.prototype and was introduced in ECMAScript and is supported in all modern browsers.

JavaScript array forEach() is the entry−level loop tool that will iterate over your array and pass you each value and the index. Then you can use the data to manipulate the DOM or display on the page.

Essentially forEach() lets you loop thru the values within an array one-by-one and then we can do something fun with it.

array forEach() parameters

JavaScrip array forEach() method consists of following parameters:

  • value – value of current element per iteration
  • index – index of current element (starts from zero)

Let’s see how we can use forEach() method and parameters with an example.

        
          let arr = ['apple', 'orange', 'cherry'];

arr.forEach(function(value, index) {
  console.log(index, value);
});

// OUTPUT
// 0 apple
// 1 orange
// 2 cherry        
      

We can shorten the above code by using JavaScript arrow function syntax:

        
          let arr = ['apple', 'orange', 'cherry'];

arr.forEach((value, index) => {
  console.log(index, value);
});

// OUTPUT
// 0 'apple'
// 1 'orange'
// 2 'cherry'        
      

array forEach() odd, even index

In some cases index parameter is useful to keep track of Loop iteration and do something with it. Imagine a scenario if you want to show only the elements in Odd or Even index position.

Let’s see the element in even index position first:

        
          let arr = ['apple', 'orange', 'cherry'];

arr.forEach((value, index) => {
  if (index % 2 == 0) {
    console.log(index, value);
  }
});

// OUTPUT
// 0 'apple'
// 2 'cherry'        
      

In above example the index % 2 == 0 condition checking if the current index is even number. In this case the 0 and 2 indexes are even number. As result the condition is true, only then the value for those indexes are displayed.

Let’s see another example to display the element in odd index position:

        
          let arr = ['apple', 'orange', 'cherry'];

arr.forEach((value, index) => {
  if (index % 2 != 0) {
    console.log(index, value);
  }
});

// OUTPUT
// 1 'orange'        
      

The index % 2 != 0 condition checks if the number is not even, In this case 1 is only index that is Odd not Even.

array forEach() shorthand syntax

Since we are using JavaScript arrow function we can use shorthand syntax, If you only want to display array values, then you can get rid of index parameter too.

        
          let arr = ['apple', 'orange', 'cherry'];

arr.forEach((value) => console.log(value));

// OUTPUT
// apple
// orange
// cherry        
      

array forEach() usage and tips

Here are few tips you need to know when considering using JavaScript array forEach() method:

  • Array forEach() is good for simple looping as it doesn’t return any values
  • You cannot break or continue items inside a forEach loop
  • You cannot forEach in reverse, use for…in or for…of looping instead
  • All array empty slots are being skipped
%d bloggers like this: