How to use “for-of” loops in ECMAScript 2019

Mayank Gupta
Aug 2 · 4 min read

This article is focused on the concept of Asynchronous Iteration, which is available in ECMAScript 2019. The“for-of” loop is often used to iterate through the list of items inside a loop. We can now use the “for-of” loop in JavaScript to iterate through the list of Promises and provide the value received when the Promise is resolved.

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”

The code below gives a simple way to create a Promise in JavaScript:

In this code, we’re creating a simple Promise that takes a function with resolve and 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. PromiseTwo andPromiseThree 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.


Conclusion

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:

Better Programming

Advice for programmers.

Mayank Gupta

Written by

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade