Working With ECMAScript 2019 Asynchronous Iteration Using “for-of”
How to use “for-of” loops in ECMAScript 2019
Let's iterate through an array of numbers using the “for-of” loop:
The code above is a simple code that is iterating through the list of
employeeSalaries. The code, in this case, is synchronously iterating over data. Each iterated value represent a data value.
Creating a Simple Promise Using “New Promise”
In this code, we’re creating a simple Promise that takes a function with
reject as an input parameter. The function then resolves the Promise after three seconds. Now, this object
newPromise is serving as a source of asynchronous data.
Iterating on Array of Promises With “for-of”
Now, let's assume the situation is we have an Array of Promises, and the user then iterates through the list of Promises using the “for-each” loop. What do you expect to be logged during each iteration? Let’s see with the help of this example:
The above code has a list of Promises inside an Array
arrayOfPromise. Now let's try to iterate through the items in the array and log each item:
The output received in the following case is:
Returning Resolved Value on Iterating With “for-of”
The above iteration logs each Promise Object to the user. We would further like to enhance the functionality so that, while iterating through the list of Promises, the value logged would be the resolved output from each Promise, rather than the Promise itself.
To cater to this requirement, we can use the “await” keyword with the “for-of” loop to iterate through each Promise. We can then wait for the Promises to be resolved before logging the result to the user.
The output for the following execution would be:
The output now is the resolved values of the Promises rather than the Promise Object itself. This is because of the “await” keyword attached with the “for-of.”
This feature can be very beneficial when you have a list of Promises. Now we don’t need to provide callbacks to each Promise function inside the list of Promises. The output received are the resolved value for each Promise.
The Order of Promises in the Array
The other important thing that needs to be considered is that the order of output is the same as the order of Promises in the Array. Let's see this in action with the help of another example:
In the above code, we have a list of Promises that are waiting to be resolved. The first Promise mentioned in the list waits for 10 seconds, while the other Promises waits for three and two seconds. What would be the order of execution in this scenario?
The output will still be the same, even though the first Promise in the list takes the most time. Meanwhile, the other Promise would be resolved, but the output out of the “for-of” loop always follows the same sequence, in which they are mentioned in the Array of Promises.
PromiseThree in this case will be resolved before
PromiseOne, but the other output will still wait for the first Promise in the list to be complete.
This is a nice, cool feature to work with. Do find places in your code where you can make use of this feature.
Other articles from the author: