path: root/files/he/web/javascript/reference/statements/for...of/index.html

---
title: for...of
slug: Web/JavaScript/Reference/Statements/for...of
translation_of: Web/JavaScript/Reference/Statements/for...of
---
<div>{{jsSidebar("Statements")}}</div>

<div> </div>

<div>הצהרת <strong><code>for...of </code></strong>יוצרת לולאה ע"ג<code> </code><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable objects</a> (שכולל {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> object וכן הלאה..),</div>

<div>invoking a custom iteration hook with statements to be executed for the value of each distinct property.</div>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) {
  <em>statement
</em>}
</pre>

<dl>
 <dt><code>variable</code></dt>
 <dd>בכל איטרציה, ערך ה property הנוכחי של <em>iterable </em>מוקצה ל <em>variable</em></dd>
 <dt>iterable</dt>
 <dd>אובייקט עם properties ברי איטרציה</dd>
</dl>

<h3 id="לדוגמא"><span style="font-size: 14px; letter-spacing: normal;">לדוגמא:</span></h3>

<h3 id="איטרציה_עג_jsxref(Array)">איטרציה ע"ג {{jsxref("Array")}}</h3>

<pre class="brush:js">let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30
</pre>

<p>אפשר להשתמש ג"כ ב <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a> </code>במקום <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> </code>באם אתה לא משנה את ערך המשתנה בתוך הבלוק.</p>

<p> </p>

<p>איטרציה ע"ג {{jsxref("String")}}</p>

<pre class="brush:js">let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"
</pre>

<h3 id="Iterating_over_a_jsxref(TypedArray)">Iterating over a {{jsxref("TypedArray")}}</h3>

<pre class="brush:js">let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255
</pre>

<h3 id="Iterating_over_a_jsxref(Map)">Iterating over a {{jsxref("Map")}}</h3>

<pre class="brush:js">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
</pre>

<h3 id="Iterating_over_a_jsxref(Set)">Iterating over a {{jsxref("Set")}}</h3>

<pre class="brush:js">let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3
</pre>

<h3 id="Iterating_over_a_DOM_collection">Iterating over a DOM collection</h3>

<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">// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article &gt; p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}
</pre>

<h3 id="Iterating_over_generators">Iterating over generators</h3>

<p>You can also iterate over <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">generators</a>:</p>

<pre class="brush:js">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 &gt;= 1000) {
    break;
  }
}
</pre>

<h3 id="Iterating_over_other_iterable_objects">Iterating over other iterable objects</h3>

<p>You can also iterate over an object that explicitly implements <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a> protocol:</p>

<pre class="brush:js">var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i &lt; 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (var value of iterable) {
  console.log(value);
}
// 0
// 1
// 2
</pre>

<h3 id="Difference_between_for...of_and_for...in">Difference between <code>for...of</code> and <code>for...in</code></h3>

<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> loop will iterate over all enumerable properties of an object.</p>

<p>The <code>for...of</code> syntax is specific to <strong>collections</strong>, rather than all objects. It will iterate in this manner over the elements of any collection that has a <code>[Symbol.iterator]</code> property.</p>

<p>The following example shows the difference between a <code>for...of</code> loop and a <code>for...in</code> loop.</p>

<pre class="brush:js">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
}
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<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>Edge</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(38)}} <a href="#Chrome_note_1">[1]</a><br>
    {{CompatChrome(51)}} <a href="#Chrome_note_3">[3]</a></td>
   <td>{{CompatGeckoDesktop("13")}} <a href="#Gecko_note_2">[2]</a></td>
   <td>12</td>
   <td>25</td>
   <td>7.1</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>5.1</td>
   <td>{{CompatChrome(38)}} [1]</td>
   <td>{{CompatGeckoMobile("13")}} [2]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>8</td>
  </tr>
 </tbody>
</table>
</div>

<p><a name="Chrome_note_1">[1]</a> 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”.</p>

<p><a name="Gecko_note_2">[2]</a> Prior Firefox 51, using the <code>for...of</code> loop construct with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> keyword threw a {{jsxref("SyntaxError")}} ("missing = in const declaration"). This has been fixed ({{bug(1101653)}}).</p>

<p><a name="Chrome_note_3">[3]</a> Support for iteration of objects was added in Chrome 51.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{jsxref("Array.prototype.forEach()")}}</li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach">Map.prototype.forEach()</a></li>
</ul>