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:

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:

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

Difference Between Symbol.iterator and Symbol.asyncIterator

Conclusion:

Understanding the difference between the Symbol.iterator and Symbol.asyncIterator is important for the implementing and working with the synchronous and asynchronous iteration in JavaScript. The Symbol.iterator is used for the synchronous iteration over objects while Symbol.asyncIterator enables asynchronous iteration accommodating scenarios requiring asynchronous data handling such as the network requests or streams.