Difference Between Symbol.iterator and Symbol.asyncIterator in JavaScript

JavaScript offers powerful mechanisms for handling iteration through objects, especially with the introduction of symbols like Symbol.iterator and Symbol.asyncIterator. These symbols play important roles in defining how objects are iterated over, whether synchronously or asynchronously. In this article, we will explore the differences between Symbol.iterator and Symbol.asyncIterator.

What is Symbol.iterator?

The Symbol.iterator is a well-known symbol in JavaScript used to make objects iterable. When an object implements this symbol as a method it becomes iterable meaning it can be used with the for...of loops, spread operators (...), and other constructs that expect iterables.

Characteristics:

Synchronous Iteration: The Objects implementing Symbol.iterator provide the synchronous iteration over their elements.
Iterable Protocol: The Objects define this symbol to conform to the iterable protocol allowing sequential access to their elements.
Example Use: Arrays, maps, sets, and custom iterable objects often implement Symbol.iterator.

Applications:

Iteration: The Allows iteration over collections using the standard iteration mechanisms.
Custom Iterables: Enables custom objects to the support JavaScript's built-in iteration mechanisms seamlessly.

Example:

JavaScript

let myIterable = {
  data: [1, 2, 3],
  [Symbol.iterator]: function() {
    let index = 0;
    return {
      next: () => ({
        value: this.data[index],
        done: index++ >= this.data.length
      })
    };
  }
};
for (let item of myIterable) {
  console.log(item); 
}

Output:

 1
2
3

What is Symbol.asyncIterator?

The Symbol.asyncIterator is a well-known symbol introduced in the ECMAScript 2018 (ES9) that defines the AsyncIterable interface. It allows the objects to be asynchronously iterable meaning they can be iterated over asynchronously using the for await...of loops.

Characteristics

Asynchronous Iteration: The Objects implementing Symbol.asyncIterator provide the asynchronous iteration over their elements.
AsyncIterable Protocol: The Objects define this symbol to conform to the AsyncIterable protocol allowing the asynchronous sequential access to their elements.
Example Use: The Async generators, promises and custom asynchronous iterable objects use Symbol.asyncIterator.

Applications

Async Iteration: This provides iteration over collections where elements are retrieved asynchronously.
Concurrency: Useful in scenarios requiring asynchronous processing of the iterable data such as the handling streams or fetching data from APIs.

Example:

JavaScript

let asyncIterable = {
  data: [1, 2, 3],
  [Symbol.asyncIterator]: async function* () {
    for (let i = 0; i < this.data.length; i++) {
      await new Promise(resolve => setTimeout(resolve, 1000)); 
      
      // Simulate async operation
      yield this.data[i];
    }
  }
};
(async () => {
  for await (let item of asyncIterable) {
    console.log(item);
  }
})();

Output:

 1
2
3