Get loop counter/index using for…of syntax in JavaScript

Get loop counter/index using for…of syntax in JavaScript

Caution:
question still applies to for…of loops.> Don’t use for…in to iterate over an Array, use it to iterate
over the properties of an object. That said, this

I understand that the basic for…in syntax in JavaScript looks like this:
for (var obj in myArray) {
// …
}

But how do I get the loop counter/index?
I know I could probably do something like:
var i = 0;
for (var obj in myArray) {
alert(i)
i++
}

Or even the good old:
for (var i = 0; i < myArray.length; i++) { var obj = myArray[i] alert(i) } But I would rather use the simpler for-in loop. I think they look better and make more sense. Is there a simpler or more elegant way? In Python it's easy: for i, obj in enumerate(myArray): print i

Solutions/Answers:

Solution 1:

for…in iterates over property names, not values, and does so in an unspecified order (yes, even after ES6). You shouldn’t use it to iterate over arrays. For them, there’s ES5’s forEach method that passes both the value and the index to the function you give it:

var myArray = [123, 15, 187, 32];

myArray.forEach(function (value, i) {
    console.log('%d: %s', i, value);
});

// Outputs:
// 0: 123
// 1: 15
// 2: 187
// 3: 32

Or ES6’s Array.prototype.entries, which now has support across current browser versions:

for (const [i, value] of myArray.entries()) {
    console.log('%d: %s', i, value);
}

For iterables in general (where you would use a for…of loop rather than a for…in), there’s nothing built-in, however:

function* enumerate(iterable) {
    let i = 0;

    for (const x of iterable) {
        yield [i, x];
        i++;
    }
}

for (const [i, obj] of enumerate(myArray)) {
    console.log(i, obj);
}

demo

Related:  How to remove item from array by value?

If you actually did mean for…in – enumerating properties – you would need an additional counter. Object.keys(obj).forEach could work, but it only includes own properties; for…in includes enumerable properties anywhere on the prototype chain.

Solution 2:

In ES6, it is good to use for – of loop.
You can get index in for of like this

for (let [index, val] of array.entries()) {
        // your code goes here    
}

Note that Array.entries() returns an iterator, which is what allows it to work in the for-of loop; don’t confuse this with Object.entries(), which returns an array of key-value pairs.

Solution 3:

Solution for small array collections:

for (var obj in arr) {
    var i = Object.keys(arr).indexOf(obj);
}

arr – ARRAY,
obj – KEY of current element,
i – COUNTER/INDEX

Notice: Method keys() is not available for IE version <9, you should use Polyfill code.
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Solution 4:

How about this

let numbers = [1,2,3,4,5]
numbers.forEach((number, index) => console.log(`${index}:${number}`))

Where array.forEach this method has an index parameter which is the index of the current element being processed in the array.

Related:  Android WebView Javascript getSelection

Solution 5:

For-in-loops iterate over properties of an Object. Don’t use them for Arrays, even if they sometimes work.

Object properties then have no index, they are all equal and not required to be run through in a determined order. If you want to count properties, you will have to set up the extra counter (as you did in your first example).

loop over an Array:

var a = [];
for (var i=0; i<a.length; i++) {
    i // is the index
    a[i] // is the item
}

loop over an Object:

var o = {};
for (var prop in o) {
    prop // is the property name
    o[prop] // is the property value - the item
}

Solution 6:

As others have said, you shouldn’t be using for..in to iterate over an array.

for ( var i = 0, len = myArray.length; i < len; i++ ) { ... }

If you want cleaner syntax, you could use forEach:

myArray.forEach( function ( val, i ) { ... } );

If you want to use this method, make sure that you include the ES5 shim to add support for older browsers.

Related:  Google Chrome copy CSS Path in Developer Tools