10.8 JS Object Iterables

Iterating Over an Array

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

Example 2: JS Iterables - Iterating Over an Array

for (const x of [1,2,3,4,5]) {
  // code block to be executed
}

Home Made Iterable

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

Example 3: JS Iterables - Home Made Iterable part 1

// 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
}

Try it yourself

• The Symbol.iterator method is called automatically by for..of.
• But we can also do it "manually":

Example 4: JS Iterables - Home Made Iterable part 2

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

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