Synchronous vs Asynchronous Javascript?

What is Synchronous in JavaScript?

As its base JavaScript language is synchronous. Synchronous means the code runs in a particular sequence of instructions given in the program. Each instruction waits for the previous instruction to complete its execution.

See the following code example of synchronous JavaScript - Code Example -

Output -

In the above JavaScript code snippet, three lines of instructions are given. Every instruction runs once after the previous instruction gets executed. Due to this synchronous nature of javascript, we get the output of console logs in the sequence we provided in the program.

When we say synchronous vs asynchronous JavaScript the execution sequence of instructions in a program is what differentiates them.

What is Asynchronous in JavaScript?

As we saw in the synchronous code example, all instructions in the program execute one after another, and every instruction waits for its previous instruction to get executed. Due to this nature of synchronous programming, sometimes important instructions get blocked due to some previous instructions, which causes a delay in the user interface. Asynchronous code execution allows to execution next instructions immediately and doesn't block the flow because of previous instructions.

See the following coding example to understand how javascript works asynchronously -

Code Example -

Output -

As we can see in the output of the above code example, Third gets printed before Second, because of the asynchronous execution of the code. Here setTimeout() function waits for 2 seconds, and in the meantime, the next instruction gets executed without waiting for the previous one to complete the execution.

What is the Difference Between Synchronous vs Asynchronous JavaScript?

Examples for Synchronous in JavaScript

Following are some of the examples where we can use synchronous JavaScript -

Reading Files Synchronously

Consider the following coding example, here synchronous javascript is used to read data from the file.txt file. Here we are using the readFileSync() function which works synchronously without any promise.
Code Example -

Output

As you can see in the above output we read the data from the file.txt file with the readFileSync() function present in the fs module of JavaScript.

Random Number Generator Without Promise

In the following code example, an asynchronous self-executing arrow function was used, in which call back function is used to call the generateRandom() function. It is one example of synchronous code.

Code Example -

Output -

Creating an HTTP Server in Node

The following example where a new http server is created in nodejs is an example of an asynchronous function. Here we used the http module provided by the nodejs. When we run the following code server starts to listen on port number 8080.

Code Example -

Output -

We get the Hello World! as an output at the client side when the client is listening at port 8080.

Examples for Asynchronous in JavaScript

Following are some of the examples where we can use asynchronous JavaScript -

Reading files Asynchronously

In the following coding example, we used the readFile() function and used the call-back arrow function inside it.

Code Example -

Output -

Using fetch() Function to Request API in Browser

In the following coding example, we used the fetch() function which is useful to make requests from client to server APIs.

Code Example -

Output -

As you can see in the output we got the joke from the Chuck Norris random jokes API which is open-source and the link is as given in the code to make the get requests. Here we converted the given response in the JSON format and further accessed the value from the object to access the joke. Use this Compiler to compile your code.

Random Number Generation with Promise Function

Following is the code example of random number generation in the given range with a promise function. Here we used the asynchronous call in the self-executing function, and resolved the promise in the generateRandom() function definition.

Code Example -

Output -

Learn More

In this article, we saw the difference between synchronous and asynchronous JavaScript. To learn more about asynchronous JavaScript you can refer to the following article -

• Asynchronous JavaScript