for...of

  • Revision slug: JavaScript/Reference/Statements/for...of
  • Revision title: for...of
  • Revision id: 25595
  • Created:
  • Creator: Marcoos
  • Is current revision? No
  • Comment 10 words added, 6 words removed

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+8

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+8
</pre>
<h3>See also</h3>
<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>
</ul>
Revert to this revision