JavaScript: for-of Loop

New in JS2015.

for (variable of iterable) {…}

The for-of loop is a syntax that lets you go thru iterable object's values.

Standard builtin iterable objects include: string, array, set, map. [see Iterable]

What is the difference between for-in loop and for-of loop?

The for-in loop for (let key in object) {…} can be used on any object, and iterates its enumerable string property keys, and will go up to the prototype chain. [see for-in Loop]

The for-of loop for (let value of iterable) {…} work with iterable object only. The value that is iterated may or may not be properties. For example, for array object, it goes thru the array values (which is property values) , but for {Map, Set} objects, it iterates their special values, for string object, it iterates thru the characters. Does not go up to the prototype chain. [see Iterable] (Technically, the value iterated is anything iterable[Symbol.iterator].next() returns.)

Example: Iterate Array

// for-of loop on array
for (let x of [3, 4, 5]) console.log(x); // prints 3 4 5

[see Array Object]

Here is “for of” loop with index and value:

// for-of loop on array
let aa = ["a", "b", "c"];

for (let [i,x] of aa.entries()) {
    console.log(i,x);
}

// prints
// 0 'a'
// 1 'b'
// 2 'c'

[see Array.prototype.entries]

Example: Iterate String

When used on string, it goes thru each char, not 16 bits unit. This fixed a long time JavaScript problem. [see Character, Code Unit, Codepoint]

// for of loop thru string.
// in each iteration, the value is a unicode char, not as 16 bits byte sequence

for (let x of "ab😂d") {
    console.log(x);
}

// prints

// a
// b
// 😂
// d

Iterate Set

// for-of loop over set object

let mySet = new Set([3,4,5]);

for (let v of mySet) {
  console.log(v);
}

// prints
// 3
// 4
// 5

Example: Iterate Map

Iterate Over Map Object