If there is a concept I have had to learn and relearn from time to time, it is the concept of iteration in JavaScript. This time around I put in extra effort to ensure each idea and concept settles in my head. So, I made a chart
let me explain what each component in the chart is about. In case you need to learn more, I will leave a link at the end of this article.
For beginners' sake, protocols are sets of rules to follow to achieve something. So in this case, Iteration protocols
.
Iteration Protocols
In JavaScript, the Iteration protocols
consist of iterable protocol
and iterator protocol
.
Iterable protocol
This rule allows an object to customize how Javascript iterates over it. JavaScript will not iterate over any object that doesn't follow this protocol.
The rule states that,
In order to be iterable, an object must implement a zero-argument method(function) named
@@iterator
, meaning that the object (or its parent) must have a property with a@@iterator
key which is available via constantSymbol.iterator
-- MDN web docs
This function must return an iterator Object
which is important when looping with for...of
.
Iterable object
An object that obeys iterable protocol
. Built-in types, such as Array
, String
, Map
, and so on, are all iterable objects
types. Below is an example of a custom object that is an iterable Object
const iteratableObject = {
*[Symbol.iterator](){
yield 1
yield 2
yield 3
}// we can also use normal function instead of generator function
}
INTERESTING FACT: Generator function
obeys both iteration protocols
Iterator protocol
This is the rule that must be followed to turn any object into an iterator
.
The rule states that,
In order to be an
iterator
, an object must implement anext
method and optionallyreturn
andthrow
methods. These methods can take zero or one argument and must return an object that implementsIteratorResult
interface.
Iterator Object
Any object that obeys iterator Protocol
i.e implement at least the next
method that returns IteratorResult
object.
Example of Iterator object
const iteratorObject = {
next() {
return {
done: false,
value: "hello"
}
}
}
next, return and throw method
These are iterator Object
methods. Of the three, only next
is required for an iterator Object
.
next method
: get called to produceIteratorResult
with the next value in the sequence.return method
: when this method is defined, it gets called whenbreak
is used infor...of
loop. It is used for clean-up operations like closing an open file descriptor, ending a connection to a database, and so on.throw method
- Gets called when there is an exception during iteration. This function is called to inform iterator object that an error has occurred. This is also for cleanup operations.
IteratorResult Interface
next
, return
, and throw
methods must return an object that implements this interface. The interface has two optional properties value
and done
. The presence or absence of one or both properties carries some meanings:
- when both properties are missing, the default will be
{ value: undefined, done: false }
Done property
This property stores a boolean value. when it is true
, it means we are done with the iteration and there are no values left to present. false
means the opposite.
Value property
This property can hold any valid JavaScript data type. This is the value we see when we loop over an iterable Object
using for...of
loop.
const iteratableObject = {
*[Symbol.iterator](){
yield 1
yield 2
yield 3
}
}
for ( const you of iteratableObject){
console.log(you, "value from IteratorResult.value")
}
If you need more information on these components from the source, here is an iteration protocols article on MDN web docs.
Let me know if you have any suggestions or questions in the comments.
You can reach me on linkedin and Twitter: killcodeNG.
Top comments (0)