for...of

  • Revision slug: JavaScript/Reference/Statements/for...of
  • Revision title: for...of
  • Revision id: 296919
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

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

Revision Source

<div>{{non-standard_header()}}</div>

<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-US/docs/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-US/docs/JavaScript/Reference/Statements/for...in" title="en-US/docs/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-US/docs/JavaScript/Reference/Statements/for_each...in" title="en-US/docs/JavaScript/Reference/Statements/for_each...in">for each...in</a></code> - a similar construct from E4X</li>
  <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.forEach()</code></a></li>
</ul>
Revert to this revision