Introduction

JavaScript is a single-threaded language, which means it has only one call stack that is used to execute the program. The call stack is the same as the stack data structure that you might read in Data structures. As we know stacks are FILO that is First In Last Out. Similarly, within the call stack, whenever a line of code gets inside the call stack it gets executed and move out of the stack. In this way, JavaScript is a single-thread language because of only one call stack.

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.

Photo by Florian Olivo on Unsplash

Synchronous JavaScript

As the name suggests synchronous means to be in a sequence, i.e. every statement of the code gets executed one by one. So, basically a statement has to wait for the earlier statement to get executed.

Synchronous Code

As you can see in the above code snippet everything is happening in a synchronous way which simply means that each statement is basically processed one after another line by line. In this example, first the file system module is required then the file is read and then we log the result to the console. So you see that each line of code basically waits for the result of the previous line.

Now, this can become a problem especially with slow operations because each line blocks the execution of the rest of the code. And so, we can say that synchronous code is also called blocking code because a certain operation can only be executed after the one before has finished.

The solution to this problem is to use asynchronous non-blocking code.

Asynchronous JavaScript

Asynchronous means that things can happen independently of the main program flow. Asynchronous code takes statements outside of the main program flow, allowing the code after the asynchronous call to be executed immediately without waiting.

Asynchronous code allows the program to be executed immediately where the synchronous code will block further execution of the remaining code until it finishes the current one. This may not look like a big problem but when you see it in a bigger picture you realize that it may lead to delaying the User Interface.

So in asynchronous code, we upload heavy work to basically be worked on in the background. And then, once that work is done a callback function that we register before is called to handle the result. And during all that time the rest of the code can still be executing without being blocked by the heavy task which is now running in the background.

Asynchronous Code

In this example, we use the asynchronous readFile function which accepts a callback function. This will start reading the file in the background and then, immediately move on to the next statement printing to the console the string-”Reading file …”. So, you can see we are not blocking the execution here. Then, when the file is finally completely read the callback function will be called and so, the data that was read will then be printed to the console.

Conclusion

As the JavaScript is a single threaded language so for each application there’s only one thread. Now that means all the users accessing your application are all using the same thread. And so, whenever they’re interacting with the application the code that is run for each user will be executed all in the same thread at the same place in the computer running the application. Now if you have 5000 or 5 million users then when one user locks the single thread with synchronous code all other users will have to wait and that might not be a huge problem if you have like five users but it definitely will for thousands or even millions of users at the same time. So in that case we need to use the Asynchronous code.