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

by

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

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.

More Related Contents:

  1. Javascript efficiency: ‘for’ vs ‘forEach’ [closed]
  2. Check if object value exists within a Javascript array of objects and if not add a new object to array
  3. Strange behavior in Javascript enhanced for…in loop
  4. forEach loop through two arrays at the same time in javascript
  5. I want to print odd numbers using javascript [closed]
  6. adding array elements with for loop JavaScript
  7. Countdown in days
  8. Loop through an array in JavaScript
  9. Short circuit Array.forEach like calling break
  10. What is the difference between ( for… in ) and ( for… of ) statements?
  11. Iterating over result of getElementsByClassName using Array.forEach
  12. Calling an asynchronous function within a for loop in JavaScript
  13. forEach on querySelectorAll not working in recent Microsoft browsers
  14. Are loops really faster in reverse?
  15. forEach on array of undefined created by Array constructor
  16. How to loop through all the elements returned from getElementsByTagName [duplicate]
  17. JavaScript Loops: for…in vs for
  18. The invocation context (this) of the forEach function call
  19. How to use setInterval function within for loop
  20. Using forEach on an array from getElementsByClassName results in “TypeError: undefined is not a function”
  21. Why Array.forEach is slower than for() loop in Javascript? [duplicate]
  22. Loop in Jade (currently known as “Pug”) template engine
  23. Is optimizing JavaScript for loops really necessary?
  24. Loop over an array in JavaScript
  25. Splicing a Javascript array from within the callback passed to forEach
  26. Iterating a JavaScript object’s properties using jQuery
  27. For-loop performance: storing array length in a variable
  28. JavaScript for loop index strangeness [duplicate]
  29. Why is “forEach not a function” for this object?
  30. How to loop through key/value object in Javascript? [duplicate]

Leave a Comment