forEach is BAD! for Async Await Code | Advanced Async/Await Javascript Tutorial

🚀 This tutorial is part of an Advanced Javascript Concepts tutorial series playlist:

Async Await with forEach is BAD! | Advanced Async/Await Javascript Tutorial

(00:00) Intro
(00:05) Welcome and Intro
(00:22) forEach - What's it good for?
(02:34) Async fetch request example
(03:51) forEach with Async Await is BAD
(07:33) Alternative #1: traditional for loop
(09:39) Alternative #2: for...of loop
(14:01) Alternative #4: A different reduce

📚 References:
MDN forEach:
MDN for...of:
MDN PromiseAll:
MDN reduce:

✅ Follow Me:

Was this tutorial about why forEach is not for use with Async/Await in Javascript helpful? If so, please share. Let me know your thoughts in the comments.

#foreach #async #await

[Cerbeh]

Really cool seeing the reduce example. I recently used it myself to serialise a bulk file upload due to size limits on our API. Had never seen it before and now here you are making a video explaining it too!

[Bayo]

as soon as I saw this title I had an epiphany and watching it helped me solve something at work. thank you so much

[cedigasser]

Actualy, await Promise.all() returns an array in which the results are in the same order as the promises they're from. This is usefull if you don't need to wait after each promise but still need them in sequence.

[glennadams]

I've struggled to get serialized data from multiple async function calls and this clears up a lot. Aside from when not to use a forEach method, the gem in your lesson is going deeper into async/await and map/reduce methods. Cool!

[NguyenNguyen-ekzq]

I enjoy watching the reduce alternative. However, what made me unrest there is the callback of reduce without a return statement. Turns out that with async await and without an explicit return statement, you actually implicitly return a promise resolve undefined. That could have been explained in the video. Anw, thanks for a great video.

[chriskao]

I falled into this pit once. It took me days to find out the reasons and fix with the for ... of approach.
At that time not many articles I could find on this topic.
Thanks for making this video. This really do help.

[DebdutBiswasOnline]

Awesome, learned a lot. I was facing exactly a same problem to asynchronously send multiple separate emails by iterating an array fetched as database result.

[urssaf]

Let's not forget "for await... of" loops and "generators" solution.

[yadusolparterre]

12:19 You could have refactored your code in a cleaner way:
const posts = Promise.all(ids.map(getPost))

No need for an async function if you are not going to await anything

[dweblinveltz]

I love the reduce method. So many different applications for it; having said that, I really hope not to see this usage out in the wild. The first three variations were clearer, easier to read, and more effective. One thing I really don't like is the "magic" that seems to be occurring. When I first glance at it, my first question is, "Why isn't the callback returning something?" I can imagine every new dev being thrown off by how that works.

[benarcher]

"To get the job done". Most of the time that's all that matters. Thank you Dave for all your great JavaScript tutorials.

[RD-jrnv]

Reduce is so versatile, can do a million things with it. This was really neat

[lalitpatil]

2 days before I was struggling with this forEach with async issue and today I saw your video. Saved my day.
Thank you.

[caffeinated-pixels]

Good stuff Dave. It's interesting that when you learn functional programming in JS, you are constantly told that using for loops is bad because it's imperative, but I guess that's not always the case! Anyway, that reduce method is cool.

[samirsamir]

Thank you Dave for this super great dev. Channel as Well as your Teaching way .

[AntonioSantos-vezv]

Kind of advanced for me at this point, but it's put so clearly I've learned a lot. Thanks!

[kevinbatdorf]

forEach should always be used when you can (and have side effects). It’s a declarative approach that abstracts the implementation (and optimizations) to the browser.

[kumar-jatin-]

Thanks Dave. I learned this lesson the hard way. I was using venom-bot and xlsx to automate sending a bunch of whatsapp messages to someone. I tried using forEach and async. That didn't end well lol.

[PauloSantosk]

forEach respected the await instrucion, but It was executed recursively in a more performatic way.
If you need order, sort the results.

[janjankowski]

A small addition to the last serialized example:

const getPostsSerialized = async (ids) => {
const result = await ids.reduce(async (acc, id) => {
const prev = await acc;
const post = await getPost(id);
console.log(`post id - ${id}:`, post);
return [...prev, post];
}, Promise.resolve([]));
console.log("result:", result);
}


Allows you to receive an array of all returns by the end like promise.All()