JavaScript Array Iteration

In this tutorial:

How to iterate over an Array with for loop
How to iterate over an Array with for...of
How to iterate over an Array with for...in
How to iterate over an Array with forEach()

There are multiple methods to iterate over an array in JavaScript. Array iteration methods operate on every array item. This tutorial briefly explains the most commonly used loops and array iteration methods with code examples.

We will use following array for this tutorial:

const cities = ["New York","Boston","Chicago","Miami","Orlando"];

How to Iterate Over an Array with for Loop in JavaScript

Following example shows how to use a traditional for loop with a numeric index when iterating over arrays.

const cities = ["New York","Boston","Chicago","Miami","Orlando"];
for (let i = 0; i < cities.length; i++) {
    console.log(cities[i]);
}

This will output value of all the elements of array.

New York
Boston
Chicago
Miami
Orlando

How to Iterate Over an Array with for...of in JavaScript

The for...of creates a loop iterating over an Array. Following example shows the use of for...of.

const cities = ["New York","Boston","Chicago","Miami","Orlando"];
for (city of cities) {
    console.log(city);
}

Here, variable city receives a value from the array cities on each iteration. 

cities is the array on which the loop operates. 

Statement is executed on every iteration to output value on console,, stored in variable city.

This will also output value of all the elements of array.

New York
Boston
Chicago
Miami
Orlando

How to Iterate Over an Array with for...in in JavaScript

The for...in creates a loop iterating over an Array. It iterates over property name. It gives us the key which we can use to get the values from array.

The main difference between for...of and for...in is that for...in iterates over property names, for...of iterates over property values

Following example shows the use of for...in

const cities = ["New York","Boston","Chicago","Miami","Orlando"];
for (i in cities) {
    console.log(cities[i]);
}

This will also output value of all the elements of array.

New York
Boston
Chicago
Miami
Orlando

Let's try for...in with another example.

const cities = ["New York","Boston","Chicago","Miami","Orlando"];
cities.LA = "Los Angeles"

for (i in cities) {
    console.log(i);
}

Here, variable "i" receives a string property name on each iteration.

cities is the array name

Statement is executed on every iteration to output string property name on console, stored in variable i.

This will output.

0
1
2
3
4
LA

How to Iterate Over an Array with forEach() in JavaScript

The forEach() method executes a function (callback function) once for each array element. The function is executed only for array indexes which have assigned values. It is not executed for empty elements in sparse arays.

const cities = ["New York","Boston","Chicago","Miami","Orlando"];
cities.forEach(foo);

function foo(v){
    console.log(v);
}

Here, foo() is a user defined function to be executed for each element in the array. The function name could be any valid JavaScript function name.

The function foo() is called with one argument "v", the value of current element being processed in the array.

This will also output value of all the elements of array.

New York
Boston
Chicago
Miami
Orlando