What is the use of the Symbol.iterator property in JavaScript?

In JavaScript, the Symbol.iterator property is a built-in symbol that is used to define and customize the behavior of objects when they are iterated using a for...of loop.

This property allows developers to define their own iterators for objects that are not inherently iterable, such as arrays, strings, and sets.

Iterators are objects that provide a way to access the elements of a collection one by one. They are typically used in conjunction with the for...of loop, which is a more concise and readable way of iterating over the elements of a collection than traditional for loops.

When an object has a Symbol.iterator property, it means that it is iterable and can be used in a for...of loop. The Symbol.iterator property should be a function that returns an iterator object. This iterator object should have a next() method, which returns an object with two properties: value and done.

The value property represents the current element in the collection being iterated, and the done property is a boolean value that indicates whether there are more elements in the collection. If done is true, the iteration is complete and the loop will exit.

Let’s take a look at an example of how the Symbol.iterator property works. Suppose we have an object called myObject that we want to make iterable. We can define a Symbol.iterator property for myObject like this:

let myObject = {
  data: [1, 2, 3, 4, 5],
  [Symbol.iterator]() {
    let index = 0;
    let data = this.data;
    return {
      next() {
        if (index < data.length) {
          return { value: data[index++], done: false };
        } else {
          return { done: true };
        }
      },
    };
  },
};

In this example, we define a Symbol.iterator property for myObject that returns an iterator object. The iterator object has a next() method that iterates over the data array property of myObject.

We can now use myObject in a for...of loop like this:

for (let value of myObject) {
  console.log(value);
}

This will output the following values to the console:

1
2
3
4
5

Notice how we can now iterate over myObject using a for...of loop, even though it is not an array or other inherently iterable object. This is because we defined a Symbol.iterator property for myObject that returns an iterator object.

Another example of using the Symbol.iterator property is to create an iterable object that generates an infinite sequence of numbers. We can do this using a generator function, which is a special kind of function that can be paused and resumed.

let infiniteNumbers = {
  [Symbol.iterator]: function* () {
    let number = 0;
    while (true) {
      yield number++;
    }
  },
};

In this example, we define a Symbol.iterator property for infiniteNumbers that returns a generator function. The generator function uses the yield keyword to pause and resume execution, allowing it to generate an infinite sequence of numbers.

We can now use infiniteNumbers in a for...of loop like this:

for (let value of infiniteNumbers) {
  console.log(value);
  if (value > 100) {
    break;
  }
}

Output:

0
1
2
3
4
5
6
...
98
99
100

In this example, we use infiniteNumbers to generate an infinite sequence of numbers, but we use the break keyword to exit the loop once we have generated 100 numbers.

The Symbol.iterator property is a powerful tool in JavaScript that allows developers to define custom iterators for their own objects. By defining a Symbol.iterator property for an object, you can make it iterable and use it in a for...of loop just like an array or other inherently iterable object.

Thank you for reading, and let’s have conversation with each other

Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.