Loop through an array with index in JavaScript/jQuery

This post will discuss how to loop through an array with index in JavaScript.

1. Using a loop

We can use a for…of loop to iterates over the values of an array. The for…of loop does not provide the index directly, but we can use the Array.entries() function to get an iterator of [index, element] pairs from the array, and then use destructuring assignment to unpack key-value pairs inside the loop.

let array = ["Red", "Blue", "Green"];

for (const [index, value] of array.entries()) {

console.log(`Value: ${value}, Index: ${index}`);

}

Download Run Code

Alternatively, we can use a traditional for loop that uses a variable to keep track of the index. This is the most basic and widely supported way to loop over an array with an index. We can access the array element by using the bracket notation with the index variable.

let array = ["Red", "Blue", "Green"];

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

console.log(`Value: ${array[i]}, Index: ${i}`);

}

// Element Red, Index: 0

// Element Blue, Index: 1

// Element Green, Index: 2

Download Run Code

2. Using `Array.forEach()` function

Another option is to use the Array.forEach() function that takes a callback function as an argument. The callback function receives three parameters: the current element, the current index, and the array itself. We can use the second parameter to access the index inside the callback function. This has a benefit over the traditional for-loop as there is no need to explicitly maintain the indexing information.

let array = ["Red", "Blue", "Green"];

array.forEach(function (value, index) {

console.log(`Value: ${value}, Index: ${index}`);

});

Download Run Code

3. Using jQuery library

We can also use the third-party libraries to loop over an array with an index in JavaScript. We can use the $.each() function from the jQuery library, which takes an array and a callback function as arguments, and executes the callback function for each element in the array. The callback function receives two parameters: the index and the value. We can use the first parameter to access the index inside the callback function.

// import jquery library

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

const { window } = new JSDOM();

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

let array = ["Red", "Blue", "Green"];

$.each(array, (index, value) => {

console.log(`Value: ${value}, Index: ${index}`);

});

Download Code

4. Using Lodash library

Similarly, we can use the _.each function (alias _.forEach) from the Lodash or Underscore library. The _.each() function takes an array and a callback function as arguments, and invokes the callback function for each element in the array. The callback function receives three parameters: the value, the index, and the array itself. We can use the second parameter to access the index inside the callback function.

// import lodash library

const _ = require("lodash");

let array = ["Red", "Blue", "Green"];

_.each(array, (value, index) => {

console.log(`Value: ${value}, Index: ${index}`);

});

Download Code

That’s all about looping through an array with index in JavaScript.

Loop through an array with index in JavaScript/jQuery

1. Using a loop

2. Using Array.forEach() function

3. Using jQuery library

4. Using Lodash library

Share this:

2. Using `Array.forEach()` function