JavaScript Iterables

Welcome to our JavaScript Iterables tutorial! Iterables are a key concept in JavaScript, allowing you to work with collections of data in a consistent and efficient manner. Many built-in JavaScript objects, such as arrays, strings, sets, and maps, are iterable, meaning that you can loop through their elements using various methods.

In this tutorial, we’ll explore the concept of iterables in JavaScript, including the built-in iterable objects and how to iterate over them. We’ll also cover how to create custom iterable objects by implementing the iterator and iterable protocols. By the end of this tutorial, you’ll have a comprehensive understanding of JavaScript iterables and how to use them effectively in your projects.

Overview of Iterables in JavaScript

JavaScript Iterables are objects that implement the iterable protocol, which allows them to be looped over using the for...of loop. Common iterable objects include arrays, strings, maps, and sets.

The Iterable Protocol in JS

The iterable protocol is a set of conventions that an object must follow to be considered iterable. An object is iterable if it has a method whose key is the Symbol.iterator symbol. The method should return an iterator object with a next() method that returns an object with two properties: value and done.

Looping Over Iterables with for...of

The for...of loop can be used to iterate over iterable objects:

const myArray = [1, 2, 3, 4, 5];

for (const value of myArray) {
  console.log(value);
}

const myString = "Hello, world!";

for (const char of myString) {
  console.log(char);
}

const myMap = new Map([
  ["key1", "value1"],
  ["key2", "value2"]
]);

for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}

const mySet = new Set([1, 2, 3, 4, 5]);

for (const value of mySet) {
  console.log(value);
}

Custom Iterables in JavaScript

You can create custom iterable objects by implementing the iterable protocol:

const myIterable = {
  data: [1, 2, 3, 4, 5],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

for (const value of myIterable) {
  console.log(value);
}

That covers our introduction to iterables. To learn more continue progressing through our tutorial documentation here at Whitewood Media & Web Development.

FAQs

Q: What is a JavaScript Iterable?

A: JavaScript Iterables are objects that implement the iterable protocol, which allows them to be looped over using the for...of loop. Common iterable objects include arrays, strings, maps, and sets.

Q: What is the iterable protocol?

A: The iterable protocol is a set of conventions that an object must follow to be considered iterable. An object is iterable if it has a method whose key is the Symbol.iterator symbol. The method should return an iterator object with a next() method that returns an object with two properties: value and done.

Q: How do you loop over iterable objects with the for...of loop?

A: The for...of loop can be used to iterate over iterable objects such as arrays, strings, maps, and sets.

Q: How do you create a custom iterable object?

A: You can create a custom iterable object by implementing the iterable protocol. You need to define a method whose key is the Symbol.iterator symbol and have it return an iterator object with a next() method that returns an object with value and done properties.