I really have a hard time to understand the core ideas for 'iterator' 'iterable' 'generator'
The main reason that I'm confused is all the articles explaining the concepts seem like feeding one another.
To explain generator, the article says 'iterable' to explain 'iterator', articles uses 'generator' It feels like infinite loop of these three jargons. Can anyone let me know what these three jargons mean?
Thank you.
Probably easy enough to explain by analogy. Lets say you have a bucket of fruits and you are picking fruits out of this bucket, one by one, and passing them to someone, also one by one. The bucket, or the container you are getting your items from - iterable. Your hand you use to pick fruits out one by one - iterator. The entire you, entire mechanism used to pick stuff one by one, and pass that stuff to someone, also one by one - generator. Hope that makes some sense.
Iterator: this is the basic building block among all three -- it doesn't need the definition of the other terms. It is a plain object that has at least a next property whose value is a function (so its a method). That next function is supposed to return an object with a value property, and if more values can be got this way, that object should have a done property with value true.
Example:
const obj = {
next() {
return {
value: Math.random(),
done: true
}
}
}
This example is an iterator that represents an infinite sequence of random numbers. You would get the next one with this code:
const r = obj.next().value;
In this example we don't check the done property, but if (with another iterator) it happens to be true, then it means the sequence was fully consumed. There is no magic here or specific language support if we would only have this. You can call the next method, and decide if you will call it again or not. Quite boring...
The next term depends on the concept of iterator, and really brings life to it:
Iterable: any object that has a Symbol.iterator property whose value is a function. That function is supposed to return an iterator (see above).
Iterables have specific language support. They can be used in a for..of construct and this will implicitly call the Symbol.iterator method and then repeatedly call the next method of the iterator object as the loop executes.
They can also be used in spread syntax. That will unconditionally consume all values from the iterator that is returned by the Symbol.iterator method.
Several native JavaScript functions/constructors return iterables. Arrays are iterable, Maps and Sets are iterable, ...
And finally, the last term builds on top of the previous two:
function* and yield syntax). This object is both an iterator and an iterable, which is a so-called iterable iterator.There are quite a few more properties, behaviours, and dependencies to discuss here, but this should be enough to get a feel of the differences. Mozilla Contributors have more in their article Iteration protocols, and the articles linked from within that article.
