Why Learn Asynchronous JavaScript?

What is Asynchronous?

Before we can get into asynchronous JavaScript, we need to first talk about what asynchronous even means.

Sometimes, we do things synchronously, where each task depends on the previous task being completed before we can move on. One example is when we type out a word — each letter has to go in a specific order.

However, there are other times that we don’t always have to wait for one step to finish before we start on the next step. Take for example, baking cookies. To simplify the process, let’s focus only on preparation process, where we: 


• preheat the oven

• wait for the oven to preheat
• gather and mix the ingredients




Now, we could bake these cookies synchronously by preheating the oven, waiting until that’s done, and then mixing the ingredients. Where we don’t start on a new step until the current step is finished.

But a more efficient way is to do these steps asynchronously. We could preheat the oven first, and then immediately start on mixing our ingredients while we wait for the oven to preheat. By the time the oven’s done preheating and our ingredients are mixed, we should be ready to bake! Doing tasks asynchronously means we aren’t blocked from starting on a new task because the previous task wasn’t finished.

Asynchronous JavaScript

This same concept of synchronous and asynchronous actions applies to programming as well. In most cases, JavaScript runs synchronously, where code is read from the top down:

console.log('preheat oven');
console.log('oven is done preheating');
console.log('mix ingredients');

And that prints:

preheat oven 
oven is done preheating
mix ingredients

However, if we applied our asynchronous approach, we could have:

console.log('preheat oven');

setTimeout(() => {
  
  console.log('oven is done preheating');
}, 1000);
 
console.log('mix ingredients');

The setTimeout() is what makes our code asynchronous. It tells the JavaScript interpreter that other synchronous tasks should finish before its own callback function executes. The 2nd argument, 1000, means even if the synchronous code finishes running, wait at least 1000 milliseconds before executing the callback function. With this new knowledge in mind, what prints to the console is now:

preheat oven 

mix ingredients
oven is done preheating

By allowing our code to run asynchronously, we’re not blocking other code from running. This becomes really important when we start trying to request information from other sites. Since we can’t control how fast that request takes to reach the other site or how long it takes for information to come back, we would want to make this request asynchronous. This transformation would make our code run like:

1. Asynchronously make a request to another site
.
2. Immediately continue our synchronous code
.
3. Once the asynchronous requested information comes back, use it.

Understanding asynchronous JavaScript will greatly improve your skills as a web developer, because you can now access the information from other sites and incorporate that information into your own site! Using asynchronous JavaScript in Velo means you’ll have the ability to make full use of your backend files, as well as gaining access to a variety of information on the web!