for...of

  • Revision slug: JavaScript/Reference/Statements/for...of
  • Revision title: for...of
  • Revision id: 25599
  • Created:
  • Creator: Marcoos
  • Is current revision? No
  • Comment 84 words added

Revision Content

{{ non-standard_header() }}

Summary

Iterates over objects, invoking a custom iteration hook with statements to be executed for the value of each distinct property.

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 ];


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

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

Calculating the sum of property values of an object:

let sum = 0;
let obj = { prop1: 5, prop2: 13, prop3: 8 };

for (let item of obj) {
  sum += item;
}

print(sum); // prints "26", which is 5+13+8t

Iterating over DOM collections like 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");
}

Browser compatibility

{{ CompatibilityTable() }}

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

 

See also

Revision Source

<p>{{ non-standard_header() }}</p>
<h2>Summary</h2>
<p>Iterates over objects, invoking a custom iteration hook with statements to be executed for the value of each distinct property.</p>
<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>Syntax</h2>
<pre class="eval">for (<em>variable</em> of <em>object</em>)
  <em>statement</em>
</pre>
<h2 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>Examples</h2>
<p>The following example shows the difference between a for...of loop and a <a href="/en/JavaScript/Reference/Statements/for...in" title="en/JavaScript/Reference/Statements/for...in">for...in</a> loop. While for...in iterates over property names, for...of iterates over property values:</p>
<pre class="brush: js">let arr = [ 3, 5, 7 ];


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

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

</pre>
<p>Calculating the sum of property values of an object:</p>
<pre class="brush: js">let sum = 0;
let obj = { prop1: 5, prop2: 13, prop3: 8 };

for (let item of obj) {
  sum += item;
}

print(sum); // prints "26", which is 5+13+8t
</pre>
<p>Iterating over DOM collections like 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>
<h2>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") }}</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>{{ CompatGeckoDesktop("13") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<p> </p>
<h2>See also</h2>
<ul> <li><a href="/en/JavaScript/Reference/Statements/for_each...in" title="en/JavaScript/Reference/Statements/for_each...in">for each...in</a> - a similar construct from E4X</li> <li><a href="/en/JavaScript/Reference/Global_Objects/Array/forEach" title="en/JavaScript/Reference/Global_Objects/Array/forEach">Array#forEach</a></li>
</ul>
Revert to this revision