How To Loop Through An Array In JavaScript

How To Loop Through An Array In JavaScript

In this tutorial, you’ll learn about different ways to loop through an array in JavaScript. In JavaScript you can create an array by simply initializing as a list. JavaScript arrays are zero indexed: the first element of the array starts at zeroth index. Here is an example of how you can create a simple JavaScript array.

var array_list = ['apple', 'orange', 'pineapple', 'kiwi', 'grapes'];

The above code creates an array called array_list.

Other tutorials in JavaScript Array series.

Loop Through An Array Using For Loop

One of the methods to loop through an array is using a simple for loop. JavaScript arrays being zero indexed arrays, you can iterate over the array starting from zero until the length of the array using for loop. Here is an example to loop through the array_list array using a for loop.

// ---------------- loop javascript array using simple for loop -----------------

for(var index = 0; index < array_list.length; index++) {
    console.log(index + ' element is ' + array_list[index]);
}

The above code will print the following output:

0 element is apple
1 element is orange
2 element is pineapple
3 element is kiwi
4 element is grapes

Loop Through An Array Using ForEach

Another method to loop through an array is using the forEach method. Here is how the bare minimal syntax for forEach method looks like:

arr.forEach(function callback(currentValue) {
    
});

forEach method executes the callback function once for each element of the iterating array. Let’s try the forEach method against our array_list array. Here is how it looks:

// --------------- loop javascript array using forEach method -------------------

array_list.forEach(function(elem, index){
    console.log(' element is ' + elem);
});

The above code will print the array_list array. forEach method also provides some optional parameters like the index of the array element and the iterating array. Here is the forEach method with the optional parameters in action.

// --------------- loop javascript array using forEach method with optional paramters ----

array_list.forEach(function(elem, index, arr){
    console.log(index + ' index element of ' + arr + ' is ' + elem);
});

The output of the above piece of code will be like:

0 index element of apple,orange,pineapple,kiwi,grapes is apple
1 index element of apple,orange,pineapple,kiwi,grapes is orange
2 index element of apple,orange,pineapple,kiwi,grapes is pineapple
3 index element of apple,orange,pineapple,kiwi,grapes is kiwi
4 index element of apple,orange,pineapple,kiwi,grapes is grapes

Loop Through An Array Using For of Loop

Another method to loop through an array is using the for of loop. You can use it to iterate over the array_list as shown:

// --------- loop through an array using for of loop example ------------

for(let m of array_list){
    console.log('elm is ', m);
}

The above piece of code will print the array_list array as shown:

elm is  apple
elm is  orange
elm is  pineapple
elm is  kiwi
elm is  grapes

Wrapping It Up

In this tutorial, you learnt about different ways to loop through an array in JavaScript. You saw how to use a simple for loop, forEach loop and for-of loop to loop through an array in JavaScript.

Have you used any other method to loop through an array in JavaScript ? Do let us know in the comments below.