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