Introduction to Iterables and Iterators in JavaScript

Iterables and iterators are concepts in JavaScript that enable the traversal of data structures, allowing you to loop or iterate through their elements. These concepts are fundamental to many features in JavaScript, such as for...of loops and the spread/rest syntax.


An iterable is an object that has an associated iterator. Arrays, strings, maps, sets, and other built-in JavaScript objects are examples of iterables. To be iterable, an object must implement the Symbol.iterator method, which returns an iterator.


            // Array is an iterable
            const myArray = [1, 2, 3];
            // String is an iterable
            const myString = "Hello";
            // Map is an iterable
            const myMap = new Map([
              ['key1', 'value1'],
              ['key2', 'value2']


An iterator is an object that provides a next method, which returns the next value in the sequence along with information about whether the end of the sequence has been reached. The next method returns an object with two properties: value (the next value) and done (a boolean indicating if the iteration is complete).


            // Array iterator
            const arrayIterator = myArray[Symbol.iterator]();
            console.log(; // { value: 1, done: false }
            console.log(; // { value: 2, done: false }
            console.log(; // { value: 3, done: false }
            console.log(; // { value: undefined, done: true }            

Using for...of Loop:

The for...of loop is a convenient way to iterate over the values of an iterable. It automatically calls the iterator's next method until done is true.


            for (const element of myArray) {
              // Output:
              // 1
              // 2
              // 3              

Custom Iterables:

You can create custom iterables by defining the Symbol.iterator method on your objects.


            const customIterable = {
                data: [4, 5, 6],
                [Symbol.iterator]: function () {
                  let index = 0;
                  return {
                    next: () => {
                        if (index < {
                            return { value:[index++], done: false };
                      } else {
                        return { value: undefined, done: true };
              for (const element of customIterable) {
              // Output:
              // 4
              // 5
              // 6             

Understanding iterables and iterators is crucial for effective JavaScript programming, especially when working with loops, generators, and other constructs that involve the traversal of data structures. The use of these concepts makes it easier to work with various types of data in a consistent and flexible manner.

How To Open a Port on Linux

Opening a port on Linux involves configuring the firewall to allow traffic through the specified port. Here's a step-by-step guide to achieve this, assuming you are using ufw (Uncomplicated Firewall) or iptables for managing your firewall settings. u …

read more

Troubleshooting Latency Issues on App Platform

Troubleshooting latency issues on an app platform can be complex, involving multiple potential causes across the network, server, application code, and database. Here’s a structured approach to identifying and resolving latency issues. Identify …

read more