The for...of statement creates a loop iterating over iterable objects (including {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, arguments object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
Syntax
for (variable of iterable) {
statement
}
variable- On each iteration a value of a different property is assigned to variable.
iterable- Object whose enumerable properties are iterated.
Examples
Iterating over an {{jsxref("Array")}}:
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30
You can use const instead of let too, if you don't modify the variable inside the block.
let iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30
Iterating over a {{jsxref("String")}}:
let iterable = "boo";
for (let value of iterable) {
console.log(value);
}
// "b"
// "o"
// "o"
Iterating over a {{jsxref("TypedArray")}}:
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);
}
// 0
// 255
Iterating over a {{jsxref("Map")}}:
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3
Iterating over a {{jsxref("Set")}}:
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3
Iterating over a DOM collection
Iterating over DOM collections like {{domxref("NodeList")}}: the following example adds a read class to paragraphs that are direct descendants of an article:
// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");
for (let paragraph of articleParagraphs) {
paragraph.classList.add("read");
}
Iterating over generators
You can also iterate over generators:
function* fibonacci() { // a generator function
let [prev, curr] = [1, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (let n of fibonacci()) {
console.log(n);
// truncate the sequence at 1000
if (n >= 1000) {
break;
}
}
Iterating over other iterable objects
You can also iterate over an object that explicitly implements iterable protocol:
var iterable = {
[Symbol.iterator]() {
return {
i: 0,
next() {
if (this.i < 3) {
return { value: this.i++, done: false };
}
return { value: undefined, done: true };
}
};
}
};
for (var value of iterable) {
console.log(value);
}
// 0
// 1
// 2
Difference between for...of and for...in
The for...in loop will iterate over all enumerable properties of an object.
The for...of syntax is specific to collections, rather than all objects. It will iterate in this manner over the elements of any collection that has a [Symbol.iterator] property.
The following example shows the difference between a for...of loop and a for...in loop.
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};
let iterable = [3, 5, 7];
iterable.foo = "hello";
for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}} | {{Spec2('ES6')}} | Initial definition. |
| {{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}} | {{Spec2('ESDraft')}} |
Browser compatibility
{{CompatibilityTable}}
| Feature | Chrome | Firefox (Gecko) | Edge | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | {{CompatChrome(38)}} [1] {{CompatChrome(51)}} [3] |
{{CompatGeckoDesktop("13")}} [2] | 12 | 25 | 7.1 |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 5.1 | {{CompatChrome(38)}} [1] | {{CompatGeckoMobile("13")}} [2] | {{CompatNo}} | {{CompatUnknown}} | 8 |
[1] From Chrome 29 to Chrome 37 this feature was available behind a preference. In chrome://flags/#enable-javascript-harmony, activate the entry “Enable Experimental JavaScript”.
[2] From Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) to Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) the iterator property was used (bug 907077), and from Gecko 27 to Gecko 35 the "@@iterator" placeholder was used. In Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), the @@iterator symbol got implemented (bug 918828).
[3] Support for iteration of objects was added in Chrome 51.
See also
- for each...in - a similar statement, but iterates over the values of object's properties, rather than the property names themselves (deprecated).
- {{jsxref("Array.prototype.forEach()")}}
- Map.prototype.forEach()