JavaScript is an object-oriented programming language, and with the introduction of ECMAScript 6 (ES6), the iterator concept came into existence. An iterator is a new mechanism that allows us to iterate or traverse through data structures like arrays, strings, maps, and sets. However, not all data structures are iterable by default. In this article, we will learn about how we can make an object literal iterable using the Symbol.iterator method.

Syntax of Symbol.Iterator

Before we dive deep into the implementation of the Symbol.Iterator method, let's understand the syntax. The basic syntax of the Symbol.Iterator method with an array is as follows:

let arr = [1, 2, 3, 4];
let iterator = arr[Symbol.iterator]();

Here, the Symbol.iterator returns an iterable object, which can be iterated through.

Iterating through an array using Symbol.Iterator

Let's try to iterate through an array using the Symbol.Iterator method.

let arr = [1, 2, 3, 4];
let iterator = arr[Symbol.iterator]();

for (let i of iterator) {
  console.log(i);
}

Here, we first created an array arr and then assigned the iterable object returned by Symbol.iterator to iterator. Then, we used the for...of loop to iterate through the iterable object and printed the values to the console. This will output the following:

1
2
3
4

Making an Object Literal Iterable

Now that we know how to iterate through an array using Symbol.Iterator, let's try to make an object literal iterable.

Suppose we have an object literal as follows:

let person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

We can make this object iterable by defining a Symbol.iterator method inside it as follows:

let person = {
  name: 'John',
  age: 30,
  city: 'New York',
  [Symbol.iterator]() {
    let properties = Object.keys(person);
    let index = 0;

    return {
      next: () => {
        return {
          value: this[properties[index++]],
          done: index > properties.length
        };
      }
    };
  }
};

Here, we define the Symbol.iterator method inside the object person. The Symbol.iterator method returns an iterable object with the next method that returns the next property of the object every time it is called.

Let's try to iterate through the person object using the for...of loop.

for (let property of person) {
  console.log(property);
}

This will output the following:

John
30
New York

As we can see, we were able to iterate through the person object using the for...of loop.

Conclusion

In conclusion, iterators and iterables are a new concept in JavaScript that allows us to iterate through data structures more conveniently. While some data structures are iterable by default, others can be made iterable using the Symbol.iterator method. We hope this article helps you understand the concept of iterators and iterables in JavaScript.

The content of this blog post was inspired by the JavaScript - Marathon Interview Questions Series 2023 course on Udemy