Mục lục
Iterables
The iterable is a interface that specifies that an object can be accessible if it implements a method who is key is [symbol.iterator].
Some of the built-in data structure that use iterable are :
- Arrays
- Strings
- Maps
- Sets etc.
Why iterable were added in ES6?
Without iterable, it is difficult to manage the iteration on data for various type of data structures i.e iterating on an array is different from iterating on an object.
Also, ES6 has introduced new data structure like sets and maps so it will become more complicated to write logic as per data structure for iterations.
This is where iterable interface was born.
There are two things to notice here
- Data consumer — how the iteration takes place like using loops, spread operator, array.from method, destructuring via an array pattern, etc
- Data source — what data structure we choose like array, maps, string etc to iterate on.
Iterators
Object that knows how to access items from a collection one at a time, while keeping track of its current position within that sequence.
An object that is returned by the iterable interface is also an iterator object.
Iterator object have a next() method which returns the next item in the sequence. This method returns an object with two properties: done and value and when next() calls reach to the end of sequence then the done property set to true else remain false .
So the next on an iterator return :
{value: ‘Current value of iteration’, done: ‘true/false’}
Now, since we are clear with the theory, lets see some examples
Simple array example
Here, we have an array arr with some values and then we created a iterator object on which we can call the next() until we have done as true
Note: Array already have symbol.iterator keyas a function in them and in above example Symbol.iterator represents the property of
iterobject which when we call, construct an iterator instance for consuming that object’s values through next.
We can create our own iterables and iterator object lets see an example.
Custom iterators object example
Note: To run above we will use for..of loop, you can read here for more details.
This is how we iterate over our customIterable object.
for (const x of customIterable) {
console.log(x);
}
// output 1,2,3,4,5,undefined
The code executes five steps, with the counter incrementing every run. First, we return the value 1, then the value 2 and so on till 5then we indicate that the end of the iteration has been reached and value undefined is returned. Each item is wrapped in an object with the properties:
valuewhich holds the actual item anddonewhich is a boolean flag that indicates whether the end has been reached, yet.
Note: The last step can return a value if required, also we can manual break for..of loop if required using break keyword. The break keyword will send a signal to an iterator that the consuming code is complete and will not be pulling any more values from it, so it is being called anyway once we finished iterating, it is the one returning {done:true}, but we can call it manually as well.