Intro to Async JS
In this article, we’ll be answering what is asynchronous JavaScript and why it’s important to learn?
Prerequisites
Asynchronous JavaScript is a fairly advanced topic, if you are new to this programming language, I advise you to work through its basics first, such as variables, arrays... And some other things like functions.
JavaScript is single-threaded
This means it executes code in order and must finish executing a piece of code before moving onto the next one. It’s synchronous, but at times that can be harmful. For example, if a function takes a while to execute or has to wait on something, it freezes everything up in the meantime.
A good example of this happening is the window alert function. alert("Hello World" You can’t interact with the web page at all until you hit OK and dismiss the alert. You’re stuck.
My Story
As a JS dev, I know we all struggled to understand asynchronous JS and apply it. At the beginning, I said to myself “why should I even know about that? How is it important? Many people saying it’s a pain in the neck so why should I bother?” The answer was when I needed to force my code to execute in a specific order, I was trying to retrieve data from an API and then execute some code related to that data. Let’s say I wanted my code to execute in that order:
// First
console.log(1)
// Second
fetch('www.example.com',{}); // Getting data from an API
// Third
console.log(2)But my code was running like so:
console.log(1)
console.log(2)
fetch('www.example.com',{});So I was like “whyy? Isn’t javascript synchronous?” so I obviously started to stack-overflow my issue, that’s when I discovered that JavaScript won’t wait for the API call to end but it’ ll run it while executing the rest of the code. “Hmm, interesting”, so yeah I googled more and I found out that it was what I've been ignoring, our friend: Asynchronous JavaScript.
So what happened?
As we mentioned in the beginning, asynchronous code can lead to blocking and poor performance. But thanks to the JavaScript engine (V8, Spidermonkey, JavaScriptCore, etc.), which has Web API that handle these tasks in the background, the call stack recognizes functions of the Web API and hands them off to be handled by the browser. Once those tasks are finished by the browser, they return and are pushed onto the stack. So to summarize, what happened is absolutely in our favor.
Open your console and type window then press enter. You'll see most of what the Web API has to offer. This includes things like ajax calls, event listeners, the fetch API, and setTimeout. JavaScript uses low-level programming languages like C++ to perform these behind the scenes.
Now, you’re maybe wondering how can you force the execution to be in a specific order even if you’re using Web API services.
Our beloved JavaScript offers many solutions in order to achieve that and we’ll be covering these soon in another article.
Stay tuned and thank you for reading! 😄
