for...of

  • Revision slug: JavaScript/Reference/Statements/for...of
  • Revision title: for...of
  • Revision id: 25612
  • Created:
  • Creator: ziyunfei
  • Is current revision? No
  • Comment created Version Information section from Summary; 2 words added

Revision Content

{{ non-standard_header() }}

Summary

Iterates over iterable objects (including arrays, array-like objects, iterators and generators), invoking a custom iteration hook with statements to be executed for the value of each distinct property.

Version Information

Statement
Implemented in: None
ECMA Version: ECMAScript 6th Edition proposal

Syntax

for (variable of object)
  statement

Parameters

variable
On each iteration a value of a different property is assigned to variable.
object
Object whose enumerable properties are iterated.

Examples

The following example shows the difference between a for...of loop and a for...in loop. While for...in iterates over property names, for...of iterates over property values:

let arr = [ 3, 5, 7 ];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}

Iterating over DOM collections like {{ domxref("NodeList") }}: the following example adds a read class to paragraphs that are direct descendants of an article:

let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

You can also iterate over generators:

// NOTE: "function*" is not supported yet in Firefox.
// Remove the asterisk in order for this code to work in Firefox 13

function* fibonacci() { // a generator function
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    // truncate the sequence at 1000
    if (n > 1000)
        break;
    print(n);
}

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} {{ CompatGeckoDesktop("13") }} {{ bug("699565") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatGeckoMobile("13") }} {{ bug("699565") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

{{ languages( { "zh-cn":"zh-cn/JavaScript/Reference/Statements/for...of"} ) }}

Revision Source

<p>{{ non-standard_header() }}</p>
<h2 id="Summary">Summary</h2>
<p>Iterates over iterable objects (including <a href="/ko/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="Array">arrays</a>, array-like objects, <a href="/en/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</p>
<h2 id="Version_Information">Version Information</h2>
<table class="standard-table"> <tbody> <tr> <td class="header" colspan="2">Statement</td> </tr> <tr> <td>Implemented in:</td> <td>None</td> </tr> <tr> <td>ECMA Version:</td> <td>ECMAScript 6th Edition proposal</td> </tr> </tbody>
</table>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">for (<em>variable</em> of <em>object</em>)
  <em>statement</em>
</pre>
<h2 id="Parameters" name="Parameters">Parameters</h2>
<dl> <dt><code>variable</code></dt> <dd>On each iteration a value of a different property is assigned to <em>variable</em>.</dd>
</dl>
<dl> <dt><code>object</code></dt> <dd>Object whose enumerable properties are iterated.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>The following example shows the difference between a <code>for...of</code> loop and a <code><a href="/en/JavaScript/Reference/Statements/for...in" title="en/JavaScript/Reference/Statements/for...in">for...in</a></code> loop. While <code>for...in</code> iterates over property names, <code>for...of</code> iterates over property values:</p>
<pre class="brush: js">let arr = [ 3, 5, 7 ];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}
</pre>
<p>Iterating over DOM collections like {{ domxref("NodeList") }}: the following example adds a <code>read</code> class to paragraphs that are direct descendants of an article:</p>
<pre class="brush: js">let articleParagraphs = document.querySelectorAll("article &gt; p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}
</pre>
<p>You can also iterate over generators:</p>
<pre class="brush: js">// NOTE: "function*" is not supported yet in Firefox.
// Remove the asterisk in order for this code to work in Firefox 13

function* fibonacci() { // a generator function
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    // truncate the sequence at 1000
    if (n &gt; 1000)
        break;
    print(n);
}
</pre>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoDesktop("13") }} {{ bug("699565") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Chrome for Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoMobile("13") }} {{ bug("699565") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h2 id="See_also">See also</h2>
<ul> <li><code><a href="/en/JavaScript/Reference/Statements/for_each...in" title="en/JavaScript/Reference/Statements/for_each...in">for each...in</a></code> - a similar construct from E4X</li> <li><a href="/en/JavaScript/Reference/Global_Objects/Array/forEach" title="en/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.forEach()</code></a></li>
</ul>
<p>{{ languages( { "zh-cn":"zh-cn/JavaScript/Reference/Statements/for...of"} ) }}</p>
Revert to this revision