Does "for...of" loop iteration follow the array order in JavaScript?

Question

Iterating over an array using for...in doesn't guarantee order, however ES6 introduces a new construct for...of.

My limited testing of implementations of for...of indicates that it does iterate in order on array, but is this property guaranteed?

Answer 1

Iterating over an array using for...in doesn't guarantee order, however ES6 introduces a new construct for...of.

My limited testing of implementations of for...of indicates that it does iterate in order on array, but is this property guaranteed?

Yes, the order of for-of on arrays is guaranteed by the array iterator definition: It will visit the entries in the array in numeric index order (including ones that don't exist, such as those in sparse arrays — or perhaps that should be those not in sparse arrays :-) ):

Live Example on Babel's REPL, and here's an on-site snippet for those using an up-to-date browser:

"use strict";
let a = [];
a[3] = 'd';
a[0] = 'a';
a.foo = "f";
for (let v of a) {
  console.log(v);
}

Output:

a
undefined
undefined
d

(The two undefineds show as blank in Babel's REPL.)

Two things to note above:

1. Even though the array has an enumerable property foo, it isn't visited.

2. The array is sparse, and for-of did visit the two entries that aren't present (at indexes 1 and 2).

for-in, however, does not did not have a guaranteed order in ES2015 (aka "ES6") through ES2019; in ES2020, it follows the same property order (with some caveats) as the order-obeying mechanisms added in ES2015 (Object.getOwnPropertyNames, etc.). Consider this example:

"use strict";
var a = [];
a.foo = "f";
a[3] = 'd';
a[0] = 'a';
a.bar = "b";
var key;
for (key in a) {
  console.log(key);
}

In ES2015 through ES2019, it might output

0
3
foo
bar

or

foo
bar
0
3

or something else. As of ES2020, though, it is specified to output

0
3
foo
bar

because it has to visit the integer index properties first (properties whose names are strings in standard numeric form) in numeric order, followed by other properties in creation order (so, foo before bar).

(That assumes there are no enumerable properties on Array.prototype or Object.prototype (by default there aren't). If there were, we'd see them as well, but it's not specified where.)

If you want to loop through an array's values, for-of is a great tool as of ES2015, alongside the other useful tools such as Array#forEach (forEach is particularly handy on sparse arrays; it skips the entries that don't exist). for-in is rarely a good choice. There's an exhaustive list of options in this other answer.

Answer 2

My limited testing of implementations of for...of indicate it does iterate in order on array, but is this property guaranteed?

Yes. But hunting it down is a littlebit complicated, as for of doesn't only iterate arrays (like for in does enumerate objects). Instead, it generically iterates all iterable objects - in the order that their respective iterator supplies.

In fact arrays are such an iterable, and when getting an iterator from them it will be an iterator that yields all elements of the array in the same order as they can be found in the array. You can read the spec for ArrayIterator objects, they basically work like a for (var index=0; index<array.length; index++) yield array[index]; loop.

Answer 3

As per ES6 spec for for..of

for ( LeftHandSideExpression of AssignmentExpression ) Statement

If LeftHandSideExpression is either an ObjectLiteral or an ArrayLiteral and if the lexical token sequence matched by LeftHandSideExpression can be parsed with no tokens left over using AssignmentPattern as the goal symbol then the following rules are not applied. Instead, the Early Error rules for AssignmentPattern are used.

As per this grammar rule definition a for..of loop will be executed in the lexical order of the tokens when it is an Array or Object Literal.

Here is a nice blog link by David Walsh http://davidwalsh.name/es6-generators where he has explained with example how a for..of loop works using iterators.