Get index in for loop of JavaScript [Solved]

The index value is a popular interface within any loop iteration (whether for or while) that can help access the elements within an iterable or sequences (e.g., array) which can be elusive for certain loop types.

In JavaScript, the for loop can be achieved in different ways - for, for...in, for...of, and forEach - which are useful for different case scenarios. for..of allows us to access the element of the array directly without having to use any index value which is typically inserted into the array square notation (arr[index).

In this article, we will discuss how to get index in for...of JavaScript and the different methods to achieve this.

 

JS for..in loop with index

Objects contain enumerable string properties that can be accessed, and the for...in loop allows us to access them directly. Therefore, when used with arrays, we can get the index of the element stored within the array data because it’s stored as an enumerable string property

xdg = [23, 45, 6];

for (let index in xdg) {
    console.log(index);
}

Output

0
1
2

But it also means that we might get access to properties that we might not need.

Array.prototype.foo = 1;

xdg = [23, 45, 6];

for (let index in xdg) {
    console.log(index);
}

Output

0
1
2
foo

We have foo within our result because it’s part of the enumerable properties that bound to any array we create within the environment, which means

In addition, for...in iterates over property names and does so in an unspecified order, and can be unreliable to access the index or iterate over arrays.

 

JS for..of loop with index

A more reliable way to access array elements and its index is using the for...of loop method. Typically, for...of loop provides the element of the iterable object (array) with every iteration.

clubs = ["manchester united", "chelsea", "arsenal"];

for (const club of clubs) {
    console.log(club);
}

Output

manchester united
chelsea
arsenal

So, how do we access the index of the clubs array, that’s where entries() method comes in.

 

Use the entries() method

The entries() method in JavaScript returns an iterator object that contains the key/value pairs for each array index.

Let’s take a look.

clubs = ["manchester united", "chelsea", "arsenal"];

console.log(clubs.entries());
console.log(clubs.entries().next().value);

Output

Object [Array Iterator] {}
[ 0, 'manchester united' ]

The first line shows us it is an Array Iterator, and therefore, we can access the next values using the next() method combined with a value property which gives an array of the key and value as its element.

Now, let’s use it within our for...of loop statement to get index in for...of JavaScript.

clubs = ["manchester united", "chelsea", "arsenal"];

for (const [index, club] of clubs.entries()) {
    console.log(index, club);
}

Output

0 manchester united
1 chelsea
2 arsenal

Using the process of destructing, we can have access to both the index and element.

 

Use the .forEach method

Though, this method - forEach is not a for...of statement, it allows us to easily access the index of an array during a loop. Using forEach method, we can provide an arrow or callback function to be applied on each array element.

Using an arrow function, we can pass the array element (club) and the index of the element (index) and log both.

clubs = ["manchester united", "chelsea", "arsenal"];

clubs.forEach((club, index) => {
    console.log(index, club);
});

Output

0 manchester united
1 chelsea
2 arsenal

 

Summary

Iterating over an array using a particular statement can have unintended effects and may not have a direct means to access the index of array elements. With the entries() method, we are able to avoid using the for...in statement and access only the index of the array without any issues.

 

References

for...of - JavaScript | MDN (mozilla.org)
Array.prototype.entries() - JavaScript | MDN (mozilla.org)
Array.prototype.forEach() - JavaScript | MDN (mozilla.org)