I KNOW RIGHT. I mean, what the heck. What is this promise thingy? Why wait with await? If there is something called async, then is there sync as well? Does this all seem a bit too overbearing for you? It sure did for me when started to learn Javascript.
I blinded myself to not think these topics through and that wasn’t very constructive. Let’s not fight this. Let’s clear the slate and clear the mind to understand these concepts. Frantic blog reading and trying out different Stackoverflow solutions wouldn’t help you this time. Let’s take this one step at a time and understand Javascript’s asynchronous nature.
Like, most Simple English posts on this blog we won’t be reinventing the wheel. JavaScript’s core engine, its asynchronous nature, and its event loop are some of the most talked-about concepts in the industry. Hence, this blog will work on forming the perfect bigger picture in your head to guide you through this concept with the best resources, explanations, and blogs.
Let’s get this straight, once and for all.
As people recommended it countless times to me, I recommend the same to you. This conference talk about “What the heck is the event loop anyway?” is the most viewed video out of the channel for a reason. It will help you with so much understanding that you won’t believe why no one has recommended it to you for all these years. Give it a watch, and let’s reconvene here in about 25 minutes of awesomeness.
Well, I hope you liked that. This video helps you with the understanding of stacks and heaps built into JS that actually explains how code execution + memory allocation takes place in Javascript. It introduces a number of concepts effortlessly like web APIs, javascript engine called V8, callback queues, and of course the event loop and so much more
But, the really important point. We understand once and for all why Javascript has to be asynchronous in the first place. It all comes around to when things in your code take or needs time, then you can’t freeze up your entire browser instance to wait for that one resource to load”. It isn’t efficient nor is it useful. Which something very important we forget because JS was built for the web first and then the other million use cases came along.
I get it, JS is async. Why should I care?
You need to care because the asynchronous part of JS isn’t going away anywhere. You can’t run from it, now that you know how important it is. Simply put asynchronous means “Things happening at the same time” which is how JS works. Coming from a Python background, Javascript does require some getting used to but the grind is worth it. So, the real question is what are the different ways you can write asynchronous code in JavaScript. You might have already heard about quite a few of them.
- Using Async Callbacks
- Using Promises
- Using async/await
- I am waiting for higher order await in Node 14! Who’s excited for that.
These concepts have many blogs and videos about them. In the next sections, I will add context and references about each concept to make your Googling easier. Starting now, here’s a soft introduction to techniques of writing Async JS by MDN. Learning Javascript, I would recommend keeping MDN and javascript.info close to you. I love great docs as much as I love to write them.
[1] Using Async Callbacks
Callbacks have been in Javascript since the programming language was called Javascript (Don’t quote me on that). Callbacks are a great way to handle something after something else has been completed. This could be a function that you execute and after some time you like to execute another function and after some time another and so on. You can learn more about them in detail with this short video below.
Callbacks can be great to process instructions or wait for something to happen. Where a callback is simply put in a method that is called when the condition for it has been resolved. Checkout the example.js script below:
// example.js
console.log("starting")
setTimeout(function(){
console.log("Doing some processing here")
}, 0) // 10 seconds
console.log("ending")The output for this script will also be the same, since Javascript does start a timer for 0 seconds on the Web API side and after 0 seconds have been completed. It pushes the function to the callback queue where its executed as and when the stack gets empty. To see this exact snippet in action and understand how it work, check out the event loop talk.
starting ending Doing some processing here
Now, callbacks are great for handling particular simpler situations but they lead us to something you might have heard of before called “Callback Hell” in Javascript. Check out the video and this website http://callbackhell.com/
[2] Using Promises: A better way to call back?
To make callbacks more streamlined, flexible, and easy to read. Came Promises. Promises in the most simple terms, mean exactly what they are. It’s like in real life, you take out a loan from a friend with the new Promise to pay him back on time. Your friend has 2 scenarios in front of him,
- You pay back the loan, and your debt is
resolved. - You don’t pay back the loan and your promise is
rejected.
Same, goes for Promises in Javascript. I have linked a video for promises below for a better explanation. In regards to flexibility, you can easily chain multiple promises together to avoid callback hell and get your code to looking all pretty shiny. Promises have a set mechanism in place for dealing with return values by using .then and error handling by the use of .catch operators.
Promises are a brilliant concept to learn and relearn at times when you start to apply it somewhere. There is so much you can do with them and their potential is truly limitless. Here’s something I like to read about promisification. “Promisification” is the conversion of a function that accepts a callback into a function that returns a promise. Check out what the popular package Bluebird does with over 19 million downloads.
[3] Using async/await: The crowd favorite
Aync/Await is a way to write promises in a much better way. They still use promises so nothing new happening here. Also, not much to write here when Wes Bos has a video to explain it. Let’s talk more when you watch it.
I know right, async and await are pretty neat. From my favorite place about javascript, here’s a little about async/await.
The async keyword before a function has two effects:
- Makes it always return a promise.
- Allows
awaitto be used in it.
The await keyword before a promise makes JavaScript wait until that promise settles, and then:
- If it’s an error, the exception is generated — same as if
throw errorwere called at that very place. - Otherwise, it returns the result.
I like async/await because the simplicity it so implicitly guarantees. It helps me write code closer to synchronous styled code which is great for both readability and flexible handling of return values of promises.
How are you doing now: Resolving my promise to you
Hope with this blog, you received a much needed big picture into asynchronous Javascript. It’s a huge chunk that needs practice, know-how, and banging your head against a solid wall. Without your own personal exploration into these concepts, one can’t expect to get better at it. I am trying, and I hope you would do it too!
I am looking for more resources and suggestions to improve this blog further. Pass them down in the comments section below, don’t be shy!
That’s about it. Thanks for reading again and live in the mix!