Understanding Synchronous and Asynchronous Code in JavaScript

Understanding Synchronous and Asynchronous JavaScript

Mehdi Aoussiad
Oct 17 · 3 min read
Coding Screen.
Coding Screen.
Photo by Fotis Fotopoulos on Unsplash

Introduction

JavaScript is a single-threaded programming language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece of code before moving into the next. However, thanks to the V8 engine, JavaScript can be asynchronous which means we can execute multiple tasks in our code at one time. So, in this article, I decided to show you the difference between Synchronous and Asynchronous code in JavaScript.

JavaScript Code.
JavaScript Code.
Photo by Irvan Smith on Unsplash

Synchronous JavaScript

Synchronous code in JavaScript will start from the top of a file and execute all the way to the bottom, each line in order until it gets the bottom and it will stop. For example, if a function takes a while to execute or has to wait on something, it freezes everything up in the meanwhile because synchronous code in JavaScript can only do one task at a time, it waits until a particular statement has executed then it moves to the next one. A good example of this happening is the window alert function :

Synchronous Code in JavaScript.

You can’t interact with the webpage at all until you hit OK and dismiss the alert.

Asynchronous JavaScript

We mentioned above that JavaScript is a single-threaded language, So how do we get asynchronous code with JavaScript then?

Well, the JavaScript engine has a web API that handles 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 pushed onto the stack as a callback. That can help execute multiple functions at one time. So, asynchronous code starts executing from the top to the bottom of a file, but during that execution, it will run into some asynchronous functions where it will split off and execute that asynchronous code separately from the rest of the code at the same time. Let’s look at a simple example:

Asynchronous Code in JavaScript.

In the example above, the first line of code will start executing because It is on the stack first, so “first” gets printed. then it will move to the next line where the javascript engine will notice an asynchronous function setTimeout that requires 1000 milliseconds to be executed, So the engine will push it off to the WebAPI to be done asynchronously. The call stack moves on without caring about the code handed off to the Web APIs and is printed.

The output of our code.

Since the isn't finished, it returns .

Conclusion

Synchronous and Asynchronous programming is the concept that confuses many beginner and intermediate level developers. It’s also a pattern that is incredibly common in JavaScript. So, It’s something that you need to have a strong understanding of before you start to use languages and frameworks for full potential.

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Sign up for Best Stories

By Dev Genius

The best stories sent monthly to your email. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mehdi Aoussiad

Written by

Self-taught Front-End Web Developer from Morocco. I love writing about code & #programming in general, I focus more on writing useful articles for the people.

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Mehdi Aoussiad

Written by

Self-taught Front-End Web Developer from Morocco. I love writing about code & #programming in general, I focus more on writing useful articles for the people.

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store