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 toprogrammingas well. In most cases,JavaScriptruns synchronously, where code is read from the top down:

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

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');
Copy to clipboard

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

ThesetTimeout()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:

• Asynchronously make a request to another site
.
• Immediately continue our synchronous code
.
• 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!

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'