Synchronous vs Asynchronous JavaScript

JavaScript is a single threaded language but it can perform multiple task at a single time so means so why does js need the asynchronous behaviour? What are the problems with synchronous behaviour?

What is Synchronous?

JavaScript is a single threaded language means the code execute line by line until the one task is completed another task can be perform. It blocks the main thread of execution.

console.log("First execution");
console.log("Second execution");
console.log("Third execution");

This code execute one by one each line wait for completion of previous one.

What is Asynchronous?

JavaScript perform also asynchronous code means when a particular task took more time then another code will be execute so the dependency of code is reduced and does not block the main thread of execution.

It helps to improve of performance because it allows the multiple task at a single time.

console.log("First");

setTimeout(() => {
    console.log("Second");
}, 0);

console.log("Third");

/**
* First
* Third
* Second
*/

In this case the output is different because behind the scene it works differently as compare to synchronous code.

• When code execution start first console goes to call stack immediate run show output.

• setTimeout timers are not handled by js engine these are handled by Web api (browser or node) js is single threaded but for timers it uses another thread to complete these task.

  • On the other hand the rest of the code is executing now third console goes to call stack and execute immediately.

• A event loop is continouesly check the call stack is empty or not and the timers is expire it moves the callback to task queue ( also known as macrotask) then it moves in the call stack and execute.

Why javaScript needs Asynchronous behaviour?

JavaScript needs asynchronous behaviour because using synchronous code is very difficult to handle multiple request at a single time and highly chance code can be crash suppose your application perform a CPU intensive task like file reading, fetch data from API these are CPU intensive task where consumption of time is high.

To solve the these problem javaScript need asynchronous code where these tasks are perform by other thread on the other side main thread still executing the synchronous code so that multiple request can handle at a single time.

fetch data from API

console.log("start");

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json))

console.log("end");

In this example these console will print first then the fetch response because the fetch is asynchronous it goes to microtask queue.

Data print order:

Synchronous -> microtask queue -> macrotask queue

Problem with blocking code

We discussed about blocking code:

• It stops the execution of code

• Code can be crash

• Block the main thread.