JavaScript Iterables

Iterables are iterable objects (like Arrays).

Iterables can be accessed with simple and efficient code.

Iterables can be iterated over with for..of loops

The For Of Loop

The JavaScript for..of statement loops through the elements of an iterable object.

Syntax

for (variable of iterable) {
  // code block to be executed
}

Iterating

Iterating is easy to understand.

It simply means looping over a sequence of elements.

Here are some easy examples:

  • Iterating over a String
  • Iterating over an Array

Iterating Over a String

You can use a for..of loop to iterate over the elements of a string:

Example

const name = "ScoolioAcademy";

for (const x of name) {
  // code block to be executed
}

Iterating Over an Array

You can use a for..of loop to iterate over the elements of an Array:

Example 1

const letters = ["a","b","c"];

for (const x of letters) {
  // code block to be executed
}

Example 2

const numbers = [2,4,6,8];

for (const x of numbers) {
  // code block to be executed
}

Iterating Over a Set

You can use a for..of loop to iterate over the elements of a Set:

Example

const letters = new Set(["a","b","c"]);

for (const x of letters) {
  // code block to be executed
}

Note

Sets and Maps are covered in the next chapters.

Iterating Over a Map

You can use a for..of loop to iterate over the elements of a Map:

Example

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

for (const x of fruits) {
  // code block to be executed
}

JavaScript Iterators

The iterator protocol defines how to produce a sequence of values from an object.

An object becomes an iterator when it implements a next() method.

The next() method must return an object with two properties:

  • value (the next value)
  • done (true or false)
value The value returned by the iterator
(Can be omitted if done is true)
done true if the iterator has completed
false if the iterator has produced a new value

Note

Technically, iterables must implement the Symbol.iterator method.

String, Array, TypedArray, Map and Set are all iterables, because their prototype objects have a Symbol.iterator method.

Home Made Iterable

This iterable returns never ending: 10,20,30,40,.... Everytime next() is called:

Example

// Home Made Iterable
function myNumbers() {
  let n = 0;
  return {
    next: function() {
      n += 10;
      return {value:n, done:false};
    }
  };
}

// Create Iterable
const n = myNumbers();
n.next(); // Returns 10
n.next(); // Returns 20
n.next(); // Returns 30

The problem with a home made iterable:

It does not support the JavaScript for..of statement.

A JavaScript iterable is an object that has a Symbol.iterator.

The Symbol.iterator is a function that returns a next() function.

An iterable can be iterated over with the code: for (const x of iterable) { }

Example

// Create an Object
myNumbers = {};

// Make it Iterable
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

Now you can use for..of

for (const num of myNumbers) {
  // Any Code Here
}

The Symbol.iterator method is called automatically by for..of.

But we can also do it "manually":

Example

let iterator = myNumbers[Symbol.iterator]();

while (true) {
  const result = iterator.next();
  if (result.done) break;
  // Any Code Here
}