How to handle asynchronous For loop in JavaScript

How to handle asynchronous For Loop in Js

Since JavaScript is a single-threaded programming environment, some times it gives confusing outputs when time-consuming processes are executed middle of a code block. Using Asynchronous JavaScript such as async, await and promises developers can overcome the occurrence of those confusing outputs.

Before moving further it would be better to have mentioned that I am not going to explain basic concepts of async,await and promises in JavaScript. I am going to explain only about handling asynchronous for loop.

Example time-consuming function

I have created a time-consuming function to show how it works with different for loops.

const waitFunc = () => {
return new Promise(res => setTimeout(res, 5000));
}
const asyncDemoFunction = async (str) => {
await waitFunc();
console.log(str);
}

Is forEach() wait for results?

Test using an asynchronous function.

var demoList = ['a','b','c'];const waitFunc = () => {
return new Promise(res => setTimeout(res, 5000));
}
const asyncDemoFunction = async (str) => {
await waitFunc();
console.log(str);
}
//forEach example
const forEachWithAsync = (demolst) => {
demolst.forEach(async (i) =>{
await asyncDemoFunction(i);
});
console.log("done");
}
forEachWithAsync(demoList);

results:

done
a
b
c

From this example, we can clearly see forEach(), not giving the expected results and not waiting until the finishing of execution of the time-consuming function.

Q: How to write For Loop to wait for results?

a: using thefor loop in an asynchronous function. 😀

let’s see an example of how to do it

var demoList = ['a','b','c'];
const waitFunc = () => {
return new Promise(res => setTimeout(res, 5000));
}
const asyncDemoFunction = async (str) => {
await waitFunc();
console.log(str);
}
//for loop example
const asyncForLoop = async (strList) => {
for (const str of strList) {
await asyncDemoFunction(str);
}
console.log("done");
}
asyncForLoop(demoList);

result:

a
b
c
done

for loop gave the expected answer and waited until the finishing of execution of the time-consuming function.

Thank you Shenal Theekshana for helping me in writing a better article by proofreading.

don’t hesitate to share any comment with me.

Computer Science and Engineering Undergraduate at University of Moratuwa, Sri Lanka