JavaScript array loop

last modified last modified October 18, 2023

In this article we show how to loop over arrays in JavaScript. We can loop over elements with forEach method and for and while statements.

An array is a collection of a number of values. The array items are called elements of the array.

The following ways can be used to iterate over elements of an array in JavaScript:

• forEach method - goes over array elements
• for in - iterates over array indexes
• for of - iterates over array values
• classic for - uses counter to traverse arrays
• classic while loop - uses counter to traverse arrays

JavaScript array loop with forEach

The forEach method executes the provided function once for each array element.

const words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];

words.forEach(e => console.log(e));

console.log('-------------------------');

words.forEach((e, idx) => console.log(`${e} has index ${idx}`));

We have an array of words. With the forEach method, we go through the elements of the array and print them to the console.

words.forEach(e => console.log(e));

We loop over elements of the array.

words.forEach((e, idx) => console.log(`${e} has index ${idx}`));

In this form, we have an element and its index at disposal.

$ node foreach.js 
pen
pencil
falcon
rock
sky
earth
-------------------------
pen has index 0
pencil has index 1
falcon has index 2
rock has index 3
sky has index 4
earth has index 5

In the following example, we work with numbers.

let vals = [1, 2, 3, 4, 5];

vals.forEach(e => console.log(e * e))
console.dir(vals);

console.log('----------------');

let vals2 = vals.map(e => e * e);
vals2.forEach(e => console.log(e));
console.dir(vals2);

We apply a numeric operation on the array values.

let vals = [1, 2, 3, 4, 5];

We have an array of values.

vals.forEach(e => console.log(e * e))

We traverse the array and power all its elements.

console.dir(vals);

The contents of the array are shown with console.dir.

let vals2 = vals.map(e => e * e);

With the map function, we create a new array based on the function that we pass as a parameter.

vals2.forEach(e => console.log(e));

We go through the array of the newly created array.

$ node foreach2.js 
1
4
9
16
25
[ 1, 2, 3, 4, 5 ]
----------------
1
4
9
16
25
[ 1, 4, 9, 16, 25 ]

JavaScript array loop with for in

The for in construct is used to iterate over array indexes.

let words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];

for (let idx in words) {

    console.log(`${words[idx]} has index ${idx}`);
}

The example iterates over indexes of the array of words. It prints words along with their indexes.

$ node for_in.js 
pen has index 0
pencil has index 1
falcon has index 2
rock has index 3
sky has index 4
earth has index 5

JavaScript array loop with for of

With the for of construct, we iterate over elements of the array.

let words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];

for (let word of words) {

    console.log(word);
}

The example prints all the words of the words array.

JavaScript array loop with classic for statement

JavaScript supports the classic C-style for statement. It uses an auxiliary counter variable to traverse the array.

A for loop has three phases: initialization, condition and code block execution, and incrementation.

let words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];

for (let i=0; i<words.length; i++) {

    console.log(words[i]);
}

The example loops over the array of words with the classic for loop.

for (let i=0; i<words.length; i++) {

The i variable is the auxiliary counter value. We determine the size of the array with the length property.

In the first phase, we initiate the counter i to zero. This phase is done only once. Next comes the condition. If the condition is met, the statement inside the for block is executed. In the third phase the counter is increased. Now we repeat the 2, 3 phases until the condition is not met and the for loop is left. In our case, when the counter is equal to the size of the array, the for loop stops executing.

JavaScript array loop with while statement

The while statement is a control flow statement that allows code to be executed repeatedly based on a given boolean condition. The while keyword executes the statements inside the block enclosed by the curly brackets. The statements are executed each time the expression is evaluated to true.

let words = ['pen', 'pencil', 'falcon', 'rock', 'sky', 'earth'];

let i = 0;

while (i < words.length) {

    console.log(words[i]);
    i++;
}

The while loop is similar to the for loop; We have the counter variable and there are three phases of the while loop.

Source

JS Array documentation

In the article we have covered several ways of looping arrays in JavaScript.

Author

My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.

List all JavaScript tutorials.