Access to ES6 array element index inside for-of loop

Question

We can access array elements using a for-of loop:

for (const j of [1, 2, 3, 4, 5]) {
  console.log(j);
}

How can I modify this code to access the current index too? I want to achieve this using for-of syntax, neither forEach nor for-in.

Answer 1

Use Array.prototype.keys:

for (const index of [1, 2, 3, 4, 5].keys()) {
  console.log(index);
}

If you want to access both the key and the value, you can use Array.prototype.entries() with destructuring:

for (const [index, value] of [1, 2, 3, 4, 5].entries()) {
  console.log(index, value);
}

Answer 2

Array#entries returns the index and the value, if you need both:

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

}

Answer 3

In this world of flashy new native functions, we sometimes forget the basics.

for (let i = 0; i < arr.length; i++) {
    console.log('index:', i, 'element:', arr[i]);
}

Clean, efficient, and you can still break the loop. Bonus! You can also start from the end and go backwards with i--!

Additional note: If you're using the value a lot within the loop, you may wish to do const value = arr[i]; at the top of the loop for an easy, readable reference.

Answer 4

In a for..of loop we can achieve this via array.entries(). array.entries returns a new Array iterator object. An iterator object knows how to access items from an iterable one at the time, while keeping track of its current position within that sequence.

When the next() method is called on the iterator key value pairs are generated. In these key value pairs the array index is the key and the array item is the value.

let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']

A for..of loop is basically a construct which consumes an iterable and loops through all elements (using an iterator under the hood). We can combine this with array.entries() in the following manner:

array = ['a', 'b', 'c'];

for (let indexValue of array.entries()) {
  console.log(indexValue);
}


// we can use array destructuring to conveniently
// store the index and value in variables
for (let [index, value] of array.entries()) {
   console.log(index, value);
}

Answer 5

You can also handle index yourself if You need the index, it will not work if You need the key.

let i = 0;
for (const item of iterableItems) {
  // do something with index
  console.log(i);

  i++;
}

Answer 6

Another approach could be using Array.prototype.forEach() as

Array.from({
  length: 5
}, () => Math.floor(Math.random() * 5)).forEach((val, index) => {
  console.log(val, index)
})

Answer 7

in html/js context, on modern browsers, with other iterable objects than Arrays we could also use [Iterable].entries():

for(let [index, element] of document.querySelectorAll('div').entries()) {

    element.innerHTML = '#' + index

}

Answer 8

Just create a variable before the loop and assign an integer value.

let index = 0;

and then use addition assignment operator into the loop scope

index += 1;

That's It, check the below snippet example.

let index = 0;
for (const j of [1, 2, 3, 4, 5]) {
  console.log('index ',index);
  index += 1;
}

Answer 9

For those using objects that are not an Array or even array-like, you can build your own iterable easily so you can still use for of for things like localStorage which really only have a length:

function indexerator(length) {
    var output = new Object();
    var index = 0;
    output[Symbol.iterator] = function() {
        return {next:function() {
            return (index < length) ? {value:index++} : {done:true};
        }};
    };
    return output;
}

Then just feed it a number:

for (let index of indexerator(localStorage.length))
    console.log(localStorage.key(index))

Answer 10

You can try making use of indexOf menthod inside for of... loop

let arrData = [15, 64, 78]
for (const data of arrData) {
  console.log("data value", data, "index of data ", arrData.indexOf(data));
}

Answer 11

Also you can use JavaScript to solve your problem

iterate(item, index) {
    console.log(`${item} has index ${index}`);
    //Do what you want...
}

readJsonList() {    
    jsonList.forEach(this.iterate);
    //it could be any array list.
}   

Answer 12

es6 for...in

for(const index in [15, 64, 78]) {                        
    console.log(index);
}