JavaScript Custom Iterables

Written by Swapnil RajaPublished 24 Aug 2026

Adding a Symbol.iterator method makes your own object work with for...of.

Adding a Symbol.iterator method makes your own object work with for of.

This is how you plug a custom type into every language feature that expects an iterable.

A generator is the easiest way to implement it.

Example

javascript

const range = {
  from: 1,
  to: 3,
  [Symbol.iterator]: function* () {
    for (let i = this.from; i <= this.to; i++) {
      yield i;
    }
  }
};

console.log([...range].join(","));

PreviousJavaScript Generator Communication NextJavaScript Lazy Sequences

Example

javascript

class Range {
  constructor(from, to) {
    this.from = from;
    this.to = to;
  }
  *[Symbol.iterator]() {
    for (let i = this.from; i <= this.to; i++) {
      yield i;
    }
  }
}

const range = new Range(1, 3);

console.log([...range].join(","));

Example

javascript

class Playlist {
  constructor(songs) {
    this.songs = songs;
  }
  *[Symbol.iterator]() {
    for (const song of this.songs) {
      yield song.toUpperCase();
    }
  }
}

const playlist = new Playlist(["one", "two"]);

console.log([...playlist].join(","));

Example

javascript

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

console.log([...range].join(","));

Example

javascript

const range = {
  from: 10,
  to: 20,
  [Symbol.iterator]: function* () {
    yield this.from;
    yield this.to;
  }
};

const [start, end] = range;

console.log(start + " to " + end);

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Custom Iterables</title>
</head>
<body>

  <h1>Custom Iterables</h1>

  <p id="out"></p>

  <script>
    class Range {
      constructor(from, to, step = 1) {
        this.from = from;
        this.to = to;
        this.step = step;
      }
      *[Symbol.iterator]() {
        for (let i = this.from; i <= this.to; i += this.step) {
          yield i;
        }
      }
    }

    const evens = new Range(0, 10, 2);

    document.getElementById("out").textContent = [...evens].join(", ");
  </script>

</body>
</html>

JavaScript Custom Iterables

Example

Making an Object Iterable

Syntax

Using for of Directly

Example

A Class with Its Own Iteration

Example

Iterating Over Something More Interesting

Example

Without a Generator

Example

Destructuring a Custom Iterable

Example

Complete Example

Try It Yourself

Important Points

Conclusion