So new ECMAScript 6 has introduced for .. of loop syntax.

Unfortunately, there aren't many documentations out there that explains what this really does. As in how it differs from using Array.prototype.forEach or for .. in loop.

Is it just another imperative way to perform Array.prototype.forEach?

I've already read Mozilla's doc here. But still the idea is too vague to me.

Anyone cares to explain to this halfwit?

So new ECMAScript 6 has introduced for .. of loop syntax.

Unfortunately, there aren't many documentations out there that explains what this really does. As in how it differs from using Array.prototype.forEach or for .. in loop.

Is it just another imperative way to perform Array.prototype.forEach?

I've already read Mozilla's doc here. But still the idea is too vague to me.

Anyone cares to explain to this halfwit?

• javascript
• ecmascript-6

• 4 Read the pages on iterators and generators. In particular the new iterator protocol. – elclanrs Commented Jul 3, 2015 at 3:44

5 Answers 5

Quick hint

for..of takes the element.

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

for (let elem of a){
    console.log(elem);
}
// output: 
// 'a'
// 'b'
// 'c'

for..in takes the index.

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

for (let i in a){
    console.log(i);
}
// output:
// 0
// 1
// 2

.forEach takes element and index (optional).

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

a.forEach(function(elem,i){
    console.log(i + ': ' + elem);
});
// output:
// 0: 'a'
// 1: 'b'
// 2: 'c'

From mdn doc:

While for...in iterates over property names, for...of iterates over property values.

What else need to be clear?

Take this example:

var items = ["a", "b", "c", "d"];
for (let item of items) {
    console.log(item);
}

It's essentially equivalent to:

var items = ["a", "b", "c", "d"];
for (var i = 0; i < items.length; i++) {
    console.log(items[i]); // outputs: a, b, c, d
}

As you can see, for...of iterates only over an iterable object's values while for...in iterates over any object's property names.

Array.prototype.forEach() iterates each element in array but for...of loop iterates object using iterable protocol.

For example when you override built-in array's iterator results could be different:

const arr = ['a', 'b', 'c'];

arr[Symbol.iterator] = function*() {
    yield 1;
    yield 2;
    yield 3;
}

for (let value of arr) {
    console.log(value)
}
// output: 1, 2, 3

arr.forEach(value => console.log(value));
// output: a, b, c

I guess that the implement of Array.prototype.forEach is like this:

Array.prototype.forEach = function(callback) 
    for(var index = 0; index < arrayObject.length; index++) [
        callback(arrayObject[index], index, arrayObject);
    }
}

That means, the execution of callback function in Array.prototype.forEach is asynchronous, but the progress in a for ... in loop is synchronized.

If I'm wrong, please rectify it.