async / await in JavaScript - What, Why and How - Fun Fun Function

💖 Support the show by becoming a Patreon

async and await in JavaScript allows us to pause the execution of functions, and that allows us to write asynchronous code that reads like synchronous code.

🔗 Code snippets from the episode

🔗 Promises video

🔗 Map video

🔗 Inline evaluation plugin

🔗 mpj on Twitter

🔗 Help translate the show to your language

Inside a function marked as async in JavaScript, you are allowed to place the await keyword in front of an expression that returns a Promise. When you do, the execution of the async function is paused until that Promise is resolved.

The idea with async / await in JavaScript is to be able to write asynchronous code that flows like synchronous code.

💛 Follow on Twitch
We record the show live Mondays 7 AM PT

💛 Fun Fun Forum

💛 mpj on Twitter

💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:

💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:

💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly YouTube shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.

🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.

Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.

📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.

⏯ On Fridays, an edited version of the show is adapted for and published on YouTube.

Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Software Development, Project Management

[alexongg]

Jo Mat, where's the link to become a patreon?

[junkgrave]

This episode had everything I love about FunFunFunction - COFFEE, antics, and the usage of refactoring the same function multiple ways to illustrate concepts. I'm excited that you're going to be investing more time in your channel!

[PaoloTamburini]

Hi, you’re very nice and funny, but I found you extremely clear and easy to follow. Moreover learning smiling is the best way! You’re unique! Very good job!

[sachindraragul]

Man!!. I'm using async await for about an year but still your video gives me a stronger understanding of async await. Would love to see you again in this channel.

[robertomunoz]

4:32 after 2 days trying to understand, 10 seconds of explanation finally openned my mind... thanks bro

[AndreBradshaw]

I stopped at 7:43 as recommended, but the first 7 minutes was great! Thanks! Best explanation of async await I have seen.

[AmanGupta_Dev]

You are so funny :D.. I have never seen any developer of this humour ! Thanks for teaching us WITH such as great sense of humour :)

[JamesDHarrington]

I was right there with you for a while. "Why not just use promises?" but you have enlightened me. Thanks!

[qwarlockz]

MPJ!!!! You Rock! Glad you are back! We ALL missed you! I go back and watch your old vids as refreshers on different topics. You make code fun! Keep up the great work and you know... I LOVED the opening! (and I am way high on the OCD spectrum! ) Cant WAIT to see the next installment!

[ЕвгенийСвиридов-ье]

I missed this format of your video. Thank you for you work. I remember last summer when I was learning ES6 from your videos and then I got the job. Thank you. You probably made a big influence on my life and this is awesome.

[badselection]

Without a doubt one of the best, nay, THE best introduction to a tutorial I have ever had the pleasure of viewing.

[Shambo]

I'm continually impressed that you can make me laugh while educating me on programming! Your presentation and editing communicate why programming is NOT boring, which is a difficult thing to communicate to non-programmers. Well done!

[kirsanov]

What I like about FFFn is that MPJ not only talking about stuff, he also explaining it using opposite examples! Hell yeah man!

[maronov]

Hey MPJ, love your videos. Very absorbing, concise, and entertaining. I've been coding JS professionally since 2012, and watching this series is helping renew my passion for the language. Keep up the great work! FYI I hit the Subscribe button right around when I heard the FFV victory music at 6:53 :-)

[jnfsmile]

What takes longer - editing the video, or cleaning up the coffee?

[lastnamefirstname]

"It will absolutely positively not be worth your money." I'm sold. I need that badge.

[JB-uxri]

Thank you, I just watched all 10 of your functional programming videos, they were very good. You make it a lot more interesting/bearable than other teachers I've listened to.

[lgong]

11:47 "result" is not an array of urls. it is a promise that will resolve to an array of urls.
20:13 the "await" before "Promise.all" seems unnecessary since "await Promise.all" resolves to the url array, but the "fetchCatAvatars" async function will wrap the url array with a new promise after return. Instead, without the await, the "fetchCatAvatars" async function will just return a promise that mirrors the promise returned by "Promise.all".

[kendowney]

Love these videos, MPJ. Your humor and animation make dry subjects fun to learn.

[johnstarich]

This was probably my favorite episode of FunFunFunction to date! The content was presented very well, the pace was on point, and the antics were excellent comedic relief. I've watched many of your videos, but this one stood out to me as being especially well-made. To me, it had just the right amount of explanation paired with just the right amount of "stream of consciousness" programming.

Thank you for your great work and I can't wait to watch more!