What is the importance of 'for await...of' statement in JavaScript?

JavascriptObject Oriented ProgrammingFront End Technology

for await...of

The 'for await...of' statement creates a loop iterating over async objects and sync objects such as arrays, array-like objects, maps sets, etc.

syntax

for await (variable of iterable) {
   statement
}

Example

In the following example "for await...of" statement is used to loop over a normal array in an async format and integers were displayed from 1 to 5 as shown in the output.

Live Demo

<html>
<body>
<script>
   var txt = "";
   const array = [1,2,3,4,5];
   async function test() {
      for await (const p of array) {
         var txt = p + "</br>";
         document.write(txt);
      }
   }
   test();
</script>
</body>
</html>

Output

1
2
3
4
5


To call an async function in a loop, a new Symbol "Symbol.asyncIterator" and "for-await...of" construct are used. Most importantly "for-await...of" has played an important role to loop over async iterable object.   

Example

In the following example using "for await...of", which iterates over an async iterable, integers from 1 to 5 were displayed.

Live Demo

<html>
<body>
<script>
   var txt = "";
   var async = {
      [Symbol.asyncIterator]() {
         return {
            i: 1,
            next() {
               if (this.i < 6) {
                  return Promise.resolve({ value: this.i++, done : false});
               }
            }
         };
      }
   };
   async function test() {
      for await (let p of async) {
         txt = p + "</br>"
         document.write(txt);
      }
   }
   test();
</script>
</body>
</html>

Output

1
2
3
4
5
raja
Published on 28-Jun-2019 17:03:14
Advertisements