• JavaScript Video Tutorials

JavaScript - Symbol.asyncIterator Property

The Symbol.asyncIterator property is used to define an asynchronous iteration method on an object. It was introduced in the ECMAScript 2018 specification to enable JavaScript asynchronous iteration protocols. JavaScript often allows for synchronous iteration using for...of loops, which can operate on a variety of iterable objects, including sets, arrays, strings, maps, and more. However, synchronous iteration is inappropriate in situations when iteration requires asynchronous actions, such as retrieving data from a server or reading from a stream.

To overcome this, ECMAScript introduced the concept of asynchronous iterators and the Symbol.asyncIterator property. This built-in symbol enables an object to be an asynchronous iterable, which enables asynchronous iteration.

Syntax

Following is the syntax of JavaScript Symbol.asynciterator property −

[Symbol.asyncIterator]()

Parameters

This property doesn't accept any kind of parameter.

Return value

This property returns the value of the asynchronous iterator object.

Examples

Example 1

Let's look at the following example, where we are going to use the for await of loop to create a async iterable object with symbol.asyncIterator.

<html>
   <body>
      <script>
         const x = {
            async *[Symbol.asyncIterator]() {
               yield 11 + " < br > ";
               yield 4 + " < br > ";
               yield 33 + " < br > ";
            }
         };
         (async () => {
            for await (const a of x) {
               document.write(a);
            }
         })();
      </script>
   </body>
</html>

If we execute the above program, it will displays the number on the webpage.

Example 2

Consider the another scenario, where we are going to define a async generator function which returns a async iterables.

<html>
   <body>
      <script>
         async function* x() {
            yield 'Ram';
            yield 'Rahul';
            yield 'Ravi';
         }
         (async () => {
            for await (const a of x()) {
               document.write(a + " < br > ");
            }
         })();
      </script>
   </body>
</html>

On executing the above script, it will displays a text on the webpage.

Example 3

In the following example, we are going to create a custom async iterable class using Symbol.asyncIterator that yields values.

<html>
   <body>
      <script>
         class x {
            constructor() {
               this.a = [1, 2, 3];
            }
            async *[Symbol.asyncIterator]() {
               for (const y of this.a) {
                  await new Promise(resolve => setTimeout(resolve, 100));
                  yield y;
               }
            }
         }
         (async () => {
            for await (const b of new x()) {
               document.write(b + " < br > ");
            }
         })();
      </script>
   </body>
</html>

When we execute the script, it will displays a text on the webpage.

Advertisements