JavaScript - how to use foreach?

In this article, we're going to have a look at how to use for-each loop in JavaScript.

Quick solution:

// ONLINE-RUNNER:browser;

var array = ['item 1', 'item 2', 'item 3'];

array.forEach(function(item, index) {
    console.log('index ' + index + ': ' + item);
});

// or

for(var item of array) {
    console.log(item);
}

There are 3 ways how we can do it:

• for-of loop to work with arrays,
• for-in loop to work with arrays and objects,
• forEach method to work with arrays.

See below examples to see practical examples.

1. for-each with arrays examples

This section shows how to use shortened loop construction iterating over arrays.

1.1. for-of loop example

This section shows how to use for-of loop construction to iterate over array.

// ONLINE-RUNNER:browser;

let array = ['item 1', 'item 2', 'item 3'];

for(var item of array) {
    console.log(item);
}

Note: for-of loop was introduced in ES6 (ECMAScript 2015).

1.2. for-in loop example

This section shows how to use for-in loop construction to iterate over array.

// ONLINE-RUNNER:browser;

var array = ['item 1', 'item 2', 'item 3'];

for(var key in array) {
    if(array.hasOwnProperty(key)) {
        console.log(array[key]);
    }
}

Note: using for-in loop with array is risky because of possible additional array properties - array.hasOwnProperty(key) method solves the problem.

1.3. forEach method example

This section shows how to use forEach method to iterate over an array.

// ONLINE-RUNNER:browser;

var array = ['item 1', 'item 2', 'item 3'];

array.forEach(function(item, index) {
    console.log('index ' + index + ': ' + item);
});

Note: Array.prototype.forEach method was introduced in ES5 (ECMAScript 2009).

2.  for-in with objects examples

This section shows how to use for-in loop construction to iterate over object properties. It is very important to use hasOwnProperty method to check if each property is part of the iterated object.

// ONLINE-RUNNER:browser;

var object = {
    'key 1': 'value 1',
    'key 2': 'value 2',
    'key 3': 'value 3'
};

for (var key in object) {
    if (object.hasOwnProperty(key)) {
        let value = object[key];

        console.log(key + ': ' + value);
    }
}