--- title: for...of slug: Web/JavaScript/Reference/Statements/for...of translation_of: Web/JavaScript/Reference/Statements/for...of ---
{{jsSidebar("Statements")}}
 
הצהרת for...of יוצרת לולאה ע"ג iterable objects (שכולל {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, arguments object וכן הלאה..),
invoking a custom iteration hook with statements to be executed for the value of each distinct property.

Syntax

for (variable of iterable) {
  statement
}
variable
בכל איטרציה, ערך ה property הנוכחי של iterable מוקצה ל variable
iterable
אובייקט עם properties ברי איטרציה

לדוגמא:

איטרציה ע"ג {{jsxref("Array")}}

let iterable = [10, 20, 30];

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

אפשר להשתמש ג"כ ב const במקום let באם אתה לא משנה את ערך המשתנה בתוך הבלוק.

 

איטרציה ע"ג {{jsxref("String")}}

let iterable = "boo";

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

Iterating over a {{jsxref("TypedArray")}}

let iterable = new Uint8Array([0x00, 0xff]);

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

Iterating over a {{jsxref("Map")}}

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

Iterating over a {{jsxref("Set")}}

let iterable = new Set([1, 1, 2, 2, 3, 3]);

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

Iterating over a DOM collection

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

// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");

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

Iterating over generators

You can also iterate over generators:

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 >= 1000) {
    break;
  }
}

Iterating over other iterable objects

You can also iterate over an object that explicitly implements iterable protocol:

var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

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

Difference between for...of and for...in

The for...in loop will iterate over all enumerable properties of an object.

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

The following example shows the difference between a for...of loop and a for...in loop.

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
}

Specifications

Specification Status Comment
{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}} {{Spec2('ES6')}} Initial definition.
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}} {{Spec2('ESDraft')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Edge Opera Safari
Basic support {{CompatChrome(38)}} [1]
{{CompatChrome(51)}} [3]		 {{CompatGeckoDesktop("13")}} [2] 12 25 7.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 5.1 {{CompatChrome(38)}} [1] {{CompatGeckoMobile("13")}} [2] {{CompatNo}} {{CompatUnknown}} 8

[1] 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”.

[2] Prior Firefox 51, using the for...of loop construct with the const keyword threw a {{jsxref("SyntaxError")}} ("missing = in const declaration"). This has been fixed ({{bug(1101653)}}).

[3] Support for iteration of objects was added in Chrome 51.

See also