A Comprehensive Guide to Custom Iterables in JavaScript

This article embarks on a journey into the captivating world of JavaScript custom iterable objects. It's an important topic when there is a need to iterate over related objects or define specific iteration behaviors for certain objects.

Introduction to Iterables and Iterators in JavaScript

Iterables and iterators are frequently used in JavaScript coding. An iterable is an object that determines its iteration behavior, like the values looped over in a 

 construct, while an iterator is an object that maintains its current position in an iterable.

Understanding these two principles, we can create custom iterable objects in JavaScript by implementing the 

 method, which returns the iterator object that includes the 

Let's dive deeper into this concept with a practical example.

JavaScript Basics: Crafting Iterable Student Objects

Imagine a scenario where student objects must be made iterable to streamline the printing of their properties using the 

 loop. The process commences with the creation of a 

 constructor, which will be utilized to generate student objects:

function Student(name, age, id, courses) {
  this.name = name;
  this.age = age;
  this.id = id;
  this.courses = courses;
}

To render all student objects iterable, the 

Student.prototype[Symbol.iterator] = function () {
  const currentStudent = this;
  const studentProps = Object.getOwnPropertyNames(currentStudent);
  let propIndex = 0;

  const studentIterator = {
    next: () => {
      if (propIndex < studentProps.length) {
        const key = studentProps[propIndex];
        const value = currentStudent[key];
        propIndex++;
        const formattedValue = `${key.padStart(7)} => ${value}`;

        return {
          value: formattedValue,
          done: false
        };
      }

      return {
        value: undefined,
        done: true
      };
    }
  };

  return studentIterator;
};

Now, when iterating over any student instance, the formatted values defined in the student iterator's 

const jack = new Student("Jack", 20, "21A", ["Maths", "Biology", "Physics"]);

for (const val of jack) {
  console.log(val);
}

/*
   name => Jack
    age => 20
     id => 21A
courses => Maths,Biology,Physics
*/

Deeper Dive into JavaScript: Customization Potential

The brilliance of creating custom iterables in JavaScript lies in the flexibility it offers. The iteration behavior can be fashioned according to any logic, and the returned value in the iterator result object can be formatted in any preferred manner.

 object in our example does not inherit from the 

const jack = new Student("Jack", 20, "21A", ["Maths", "Biology", "Physics"]);

const studentIterator = jack[Symbol.iterator]();

for (const val of studentIterator) {
  console.log(val);
}

// ERROR...

This can be addressed by either explicitly establishing the prototype chain link between the 

Student.prototype[Symbol.iterator] = function () {
  // code omitted to keep code example short

  const studentIterator = {
    next() {
      // code omitted to keep code example short
    },
    [Symbol.iterator]() {
      return this;
    }
  };

  return studentIterator;
};

 object is iterable and can be used with the 

JavaScript Improvement: Making Symbol.iterator Non-Enumerable

 object, but it is enumerable, which isn't ideal. It can be made non-enumerable by defining it using the 

Object.defineProperty(Student.prototype, Symbol.iterator, {
  value: function () {
    // copy the code inside the Symbol.iterator method from above
  },
  configurable: true,
  writable: true
});

This article dove into the creation of custom iterable objects in JavaScript. The process of outlining the iteration behavior for any suitable object or a group of related objects was discussed. We also improved the implementation by making the 

 method non-enumerable. This understanding is critical when managing collections of related objects, leading to a more flexible and adaptable JavaScript codebase.

To dive deeper into JavaScript and explore concepts like this, the book 

 by Yousaf, an experienced full-stack software engineer, is highly recommended. With a deep understanding of JavaScript and valuable insights shared in this book, any JavaScript developer aspiring to achieve greater heights will find it beneficial.

CONTRIBUTOR

AUTHOR

This article embarks on a journey into the captivating world of JavaScript custom iterable objects. It's an important topic when there is a need to iterate over related objects or define specific iteration behaviors for certain objects. Iterables and iterators are frequently used in JavaScript…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

A Comprehensive Guide to Custom Iterables in JavaScript

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript