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?
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'
for...in takes the index is a very unsafe thing to say, it takes all enumerable properties, anywhere in the prototype chain, not just indexes. for(var prop in obj) === for (var prop of Reflect.enumerate(obj))
for ([elem, i] of a.entries()) … does take both as well!
forEach is a method of the prototype of a fixed set of functions. for..of works on any iterable objectFrom 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.
var func = function(callback) { callback(); }; func(function() { alert('test'); });