JavaScript forEach(): Iterate Through Array Smartly

forEach() in JavaScript is one of many ways we can iterate through the array. But out of all the loops this one is my favorite.

I understand the use of each loop is different. And it depends on what we are doing. But the forEach() loop can be used as a replacement of for() loop.

What is forEach loop ?

To be honest, forEach() is not really a loop but a method prototype in Array of JavaScript.

But what does it mean in simple terms ?

It means that the foreach is just a method in Array. That we can use to loop through items of any given array.

Why is it not a loop ?

Because internally it uses the while loop and invokes callback method that we have passed for each of our element in Array.

Here is the implementation algorithm for the forEach() method, see docs.

And, below is the syntax for forEach() loop

// some array
const myArray = [1, 2, 3, 4];

// let us loop through the array
myArray.forEach( function(value) { 
    console.log("our value for this iteration is : " + value);
});Code language: JavaScript (javascript)

If you are confused why we have passed in a method as parameter for the forEach(), don’t be.

Understanding the forEach() method callback

Now that we know forEach() is just a method. Let us look at what parameters it asks from us.

We have to pass in a method to the forEach() as argument, the higher order functions.

And the passed in method can have 3 arguments. The arguments are:

1. value – the first parameter which is the element itself
2. index – the position of the current element in the array
3. array – the array that is being looped / traversed

But we can declare only the required number of arguments for us. Meaning we can declare value, value and index, etc.

Using the forEach() loop

Now let us forEach() loop through a simple array in JavaScript. The example JavaScript:

const languages = [ "Javascript", "Java", "Python", "Go", "Ruby", "Pearl", "Assembly" ];Code language: JavaScript (javascript)

Now let us execute the following code and see the output.

languages.forEach(function(value, index, array) { 
    console.log(index, value, array); 
});Code language: JavaScript (javascript)

We will see the output something like below.

We can also declare only a single argument value. Which will look something like

I hope that cleared things up.

The break; and continue; in forEach()

By now we have already understood that forEach() loop isn’t really a loop in itself. So we cannot use the break; and continue;.

What can we do ?

The correct answer to this is it’s really up-to the developer. We can use if {} else {} and the return. It just comes down to how the user writes codes.

Compatibility and More

forEach() was introduced in ES5 and some browsers might not support it. But the compatibility issues are only for the older browsers.

Most modern browsers support it. Here is the compatibility chart.

You can also use the arrow function instead of normal JS syntax as:

languages.forEach(value => { console.log(); });Code language: JavaScript (javascript)

But beware of using the arrow functions really old version of browsers will not support it. You will have to use a transpiler.