Widely available Supported across all major browsers. Safe to use in production.

Iterators and the for...of loop

An Iterator object is an object that conforms to the iterator protocol by providing a next() method that returns an iterator result object. All built-in iterators inherit from the Iterator class. The Iterator class provides a [Symbol.iterator]() method that returns the iterator object itself, making the iterator also iterable. It also provides some helper methods for working with iterators.

Iterators

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
Iterator
38
12
17
10
38
10
Iterator.@@iterator

The [Symbol.iterator]() method of Iterator instances implements the iterable protocol and allows built-in iterators to be consumed by most syntaxes expecting iterables, such as the spread syntax and Statements/for...of loops. It returns the value of this, which is the iterator object itself.
38
12
36
10
38
10
Other
javascript.statements.for_of

The for...of statement executes a loop that operates on a sequence of values sourced from an iterable object. Iterable objects include instances of built-ins such as Array, String, TypedArray, Map, Set, NodeList (and other DOM collections), as well as the Functions/arguments object, generators produced by generator functions, and user-defined iterables.
38
12
13
7
38
7
Statement
closing iterators

Closing iterators
51
14
53
7
51
7
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 6 item(s)
Removed
  • This feature was removed in a later browser version (36)
  • This feature was removed in a later browser version (27)
Implementation note
  • Previously available under a different name: @@iterator (27)
  • A placeholder property named `@@iterator` is used.
  • Previously available under a different name: iterator (17)
  • A placeholder property named `iterator` is used.
Notes 1 item(s)
Implementation note
  • Before Firefox 51, using the `for...of` loop construct with the `const` keyword threw a `SyntaxError` ("missing = in const declaration").

Syntax

JAVASCRIPT 
// for...of loop
for (const value of [1, 2, 3]) {
  console.log(value);
}

// Custom iterator
const range = {
  from: 1, to: 5,
  [Symbol.iterator]() {
    let current = this.from;
    return {
      next: () => current <= this.to
        ? { value: current++, done: false }
        : { done: true }
    };
  }
};

Live demo

Iterate with For...of loop.

Array from element one getout, 1 per and to display..

PreviewFullscreen

Manual Control with next()

itere-ta from next Use, taiming in next. Element read..

PreviewFullscreen

Spread with Spread syntax.

iteral object one in array to convertdisplay..

PreviewFullscreen

Use cases

  • Using Iterators and the for...of loop

    An Iterator object is an object that conforms to the iterator protocol by providing a next() method that returns an iterator result object.

Cautions

  • No specific concerns. Stable across all major browsers.

Accessibility

  • When updating the DOM dynamically, announce important changes to assistive technology with aria-live regions.

Related links