Since 2015, JavaScript has improved immensely.
It’s much more pleasant to use it now than ever.
In this article, we’ll look at JavaScript iterable objects.
Iterable Values
JavaScript has various kinds of iterable objects.
They include arrays, strings, maps, sets, and NodeLists.
Constructs Supporting Iteration
There’re various constructs that make working with iterable objects easier.
One of them is the destructuring syntax.
We can destructure any iterable object entries to variables.
For example, we can write:
const [a, b] = new Set(['a', 'b', 'c']);
Then we assigned 'a' to a and 'b' to b .
The for-of loop lets us iterate through entries in iterable objects easily.
For instance, we can write:
for (const x of ['foo', 'bar', 'baz']) {
console.log(x);
}
to loop through an array.
The Array.from static method lets us create an array from iterable objects.
For example, we can convert a set to an array by writing:
const arr = Array.from(new Set(['a', 'b', 'c']));
Then arr would be [‘a’, ‘b’, ‘c’] .
The spread operator lets us do the same thing as Array.from
We can write:
const arr = [...new Set(['a', 'b', 'c'])];
to spread a set’s entries into an array.
The Map and Set constructor lets us create maps and sets from arrays.
The Map constructor takes an array with key-value arrays as entries and turn them into a set of key-value pairs in an object.
For example, we can write:
const map = new Map([
['foo', 'no'],
['bar', 'yes']
]);
To create a set, we can write:
const set = new Set(['a', 'b', 'c']);
to create it from an array.
Promise.all() lets us run multiple promises in parallel.
For instance, we can write:
Promise.all([
Promise.resolve(1),
Promise.resolve(2),
]).then(() => {
//...
});
to run 2 promises in an array in parallel.
Promise.race resolves to the value of the first promise that finishes running.
For instance, we can use it by writing:
Promise.race([
Promise.resolve(1),
Promise.resolve(2),
]).then(() => {
//...
});
And we get the first value resolved from the set of promises.
The yield* keyword lets us run generator functions from another generator function.
So we can use it by writing:
`yield*` `gen;`
Iterability
Any object with the Symbol.iterator method is an iterable object.
The method must be a generator function.
For example, we can get that method from the array by writing:
const arr = ['foo', 'bar', 'baz'];
const iter = arr[Symbol.iterator]();
Then we can get the entries one by one by calling the next method from the returned iterator:
iter.next()
We get:
{value: "foo", done: false}
when we run it the first time.
When we run it again:
iter.next()
We get:
{value: "bar", done: false}
Then when we run it again, we get:
{value: "baz", done: false}
Then finally, when we run it one last time, we get:
{value: undefined, done: true}
value is the value returned from the iterable object. And done indicates whether there’s any value to return.
next returns each item wrapped in an object.
Conclusion
JavaScript has various kinds of iterable objects.
They all have the Symbol.iterator property which is a method that returns the next value sequentially.
