JavaScript Iterable Objects

Iterable objects are objects that can be iterated (such as arrays).

Iterable objects can be accessed through simple and efficient code.

Iterable objects can be used for..of The loop performs iteration.

for..of loop

for..of statements are used to traverse the elements of iterable objects.

Syntax

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

Iteration

Iteration is easy to understand.

It just means to traverse a series of elements.

Here are some simple examples:

• Traverse string
• Traverse array

Traverse string

You can for..of Traverse the elements of the string:

Example

const name = "W3Schools";
for (const x of name) {
  // The code block to be executed
}

Try It Yourself

Traverse array

You can for..of Traverse the elements of the array:

Example 1

const letters = ['a','b','c'];
for (const x of letters) {
  // The code block to be executed
}

Try It Yourself

Example 2

const numbers = [2,4,6,8];
for (const x of numbers) {
  // The code block to be executed
}

Try It Yourself

Traverse Set

You can for..of Traverse the elements of the Set:

Example

const letters = new Set(["a","b","c"]);
for (const x of letters) {
  // The code block to be executed
}

Try It Yourself

Comment:We will introduce Set and Map in detail in subsequent chapters.

iterate over a Map

You can for..of Loop through the elements of the Map:

Example

const fruits = new Map([
  ["apples", 500]
  ["bananas", 300],
  
]
for (const x of fruits) {
  // The code block to be executed
}

Try It Yourself

JavaScript iterators

The iterator protocol defines how to generatea series of values

when an object implements next() when it becomesiterator

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

• value (next value)
• done (true or false)

Custom iterable object

The following example shows a custom iterable object that never ends, and is called next() will always return 10, 20, 30, 40, ...:

Example

// Custom iterable object
function myNumbers() {
  let n = 0;
  return {
    next: function() {
      n += 10;
      return { value: n, done: false };
    }
  };
}
// Create an iterable object
const n = myNumbers();
n.next(); // Returns 10
n.next(); // Returns 20
n.next(); // Returns 30

Try It Yourself

iterable objects that support the for..of statement.

JavaScript iterable objects are those that have Symbol.iterator object.

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

You can use the following code to iterate over an iterable object:

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 we can use for..of
for (const num of myNumbers) {
  // Arbitrary Code
}

Try It Yourself

The Symbol.iterator method will be for..of Auto Call.

But we can also call it manually:

Example

let iterator = myNumbers[Symbol.iterator]();
while (true) {
  const result = iterator.next();
  if (result.done) break;
  // Arbitrary Code
}

Try It Yourself