KEMBAR78
Iterables and Iterators in JavaScript | PDF
ITERABLES
& ITERATORS
in JAVASCRIPT
JS NUGGETS
Iterables, is a data structure that provides a way
to expose its data to the public.
This is done by implementing a method whose key is
Symbol.iterator, which is a factory for iterators.
// Variable ‘fruits’ has an Iterable list
const fruits = [' 🍎', ' 🍐', ' 🍊'];
Iterator, is a pointer for traversing the elements
of a data structure.
// Creating an Iterator ‘fruitIterator’
const fruitIterator = fruits[Symbol.iterator]();
Iterator object has a next() method which returns
the next item in the sequence.
This method returns an object with two properties,
done and value.
When next() call reaches to the end of sequence
then the done property set to true else remain
false.
fruitIterator.next();
// {value: " 🍎", done: false}
fruitIterator.next();
// {value: " 🍐", done: false}
fruitIterator.next();
// {value: " 🍊", done: false}
// Returns done as true when there is no element to
return
fruitIterator.next();
// {value: undefined, done: true}
Without iterable, it is really difficult to manage
the iteration on data for various types of data
structures.
For instance, iteration on an Array is different
from iteration on an Object.
And now with the introduction of new data
structures like Sets and Maps in ES6, it is really
going to be more complicated.
Two things to look for while using iterables,
Data consumer - How the iteration takes place.
(Loops, Spread operator, Array.from
method, Destructuring via an array
pattern, etc.)
Data source - What data structure we choose.
(Array, Objects, Set, Maps, etc.)
But, do we really need an
iterable?

Iterables and Iterators in JavaScript

  • 1.
  • 2.
    Iterables, is adata structure that provides a way to expose its data to the public. This is done by implementing a method whose key is Symbol.iterator, which is a factory for iterators. // Variable ‘fruits’ has an Iterable list const fruits = [' 🍎', ' 🍐', ' 🍊']; Iterator, is a pointer for traversing the elements of a data structure. // Creating an Iterator ‘fruitIterator’ const fruitIterator = fruits[Symbol.iterator]();
  • 3.
    Iterator object hasa next() method which returns the next item in the sequence. This method returns an object with two properties, done and value. When next() call reaches to the end of sequence then the done property set to true else remain false. fruitIterator.next(); // {value: " 🍎", done: false} fruitIterator.next(); // {value: " 🍐", done: false} fruitIterator.next(); // {value: " 🍊", done: false} // Returns done as true when there is no element to return fruitIterator.next(); // {value: undefined, done: true}
  • 4.
    Without iterable, itis really difficult to manage the iteration on data for various types of data structures. For instance, iteration on an Array is different from iteration on an Object. And now with the introduction of new data structures like Sets and Maps in ES6, it is really going to be more complicated. Two things to look for while using iterables, Data consumer - How the iteration takes place. (Loops, Spread operator, Array.from method, Destructuring via an array pattern, etc.) Data source - What data structure we choose. (Array, Objects, Set, Maps, etc.) But, do we really need an iterable?