Iterate over an array in JavaScript

This post will discuss how to iterate over an array in JavaScript.

1. Using for statement

A for-loop repeats until a specified condition evaluates to false. The JavaScript syntax remains similar to C and Java-style for-loop. You can effectively use it to process values in the array, as shown below:

const arr = [1, 2, 3, 4, 5];

for (var i = 0; i < arr.length; i++) {

console.log(arr[i]);

}

Download Run Code

You can also use a while statement over a for-loop to iterate over an array:

const arr = [1, 2, 3, 4, 5];

var i = 0;

while (i < arr.length)

{

console.log(arr[i]);

i++;

}

Download Run Code

2. Using `Array.prototype.forEach()` function

The forEach() method executes a specified function for each array element. You can use the callback function to process values in the array.

const arr = [1, 2, 3, 4, 5];

arr.forEach(function (item) {

console.log(item);

});

Download Run Code

In ES6, we have arrow functions that can replace anonymous functions.

1 2	const arr = [1, 2, 3, 4, 5]; arr.forEach(item => console.log(item));

Download Run Code

The forEach method has a benefit over the traditional for-loop in that we don’t have to explicitly maintain the indexing information as the callback function is automatically invoked with the index of the current element in its second argument.

1 2	const arr = [1, 2, 3, 4, 5]; arr.forEach((item, index) => console.log(item, `found at index`, index));

Download Run Code

3. Using for…of statement

The ES6 standard introduced the for…of construct for iterating over an iterable. The for…of statement creates a loop that iterates over the property values. It is different from a for…in loop, which iterates over property names instead of property values.

const arr = [1, 2, 3, 4, 5];

for (const i of arr) {

console.log(i);

}

Download Run Code

4. Using Array Iterator

The ES6 for…of statement internally uses iterators. To explicitly get an Array Iterator in JavaScript, you can call the values() method on the array.

const arr = [1, 2, 3, 4, 5];

var it = arr.values();

while (1)

{

let entry = it.next();

if (entry.done) {

break;

}

console.log(entry.value);

}

Download Run Code

5. Using jQuery

Similar to JavaScript forEach() method, jQuery offers the $.each() method, which can be used to loop through the set of the array elements.

const { JSDOM } = require("jsdom");

const { window } = new JSDOM();

const $ = require("jquery")(window);

const arr = [1, 2, 3, 4, 5];

$.each(arr, function() {

console.log(this.valueOf());

});

Download Code

6. Using Underscore/Lodash Library

Similarly, you can use the _.forEach method from Underscore or Lodash library, which offers similar behavior. Its alias _.each can also be used.

const _ = require('underscore'); // or lodash

const arr = [1, 2, 3, 4, 5];

_.forEach(arr, function(item) {

console.log(item);

});

Download Code

That’s all about iterating over an array in JavaScript.

Iterate over an array in JavaScript

1. Using for statement

2. Using Array.prototype.forEach() function

3. Using for…of statement

4. Using Array Iterator

5. Using jQuery

6. Using Underscore/Lodash Library

Share this:

2. Using `Array.prototype.forEach()` function