Javascript is a single-threaded, non- blocking, asynchronous programming language.

What is Synchronous Programming ?

Synchronous means tasks are performed one at a time,we have to wait for tasks to finish to move to the next task.

What is Asynchronous Programming ?

 In Asynchronous programming we don’t have to wait for a task to finish, you can move to the next task before the previous task finishes.

How is Javascript Synchronous ?

Javascript maintains a Call Stack , which maintains the order of execution of execution Contexts.

When javascript invokes a function, it is pushed into the call stack and execution of the function takes place.

Lets See with a Example – 

Lets See How the code is executed ?

Step 1 – The Function f1() is pushed in the call stack , and the execution of the f1() function takes place and after execution the f1() is popped from the call stack we get output -> “Function 1 is Called”.

Step 2 – The Function f2() is pushed in the call stack , and the execution of the f2() function takes place and after execution the f2() is popped from the call stack we get output -> “Function 2 is Called”.

Step 3 – The Function f3() is pushed in the call stack , and the execution of the f3() function takes place and after execution the f3() is popped from the call stack we get output -> “Function 3 is Called”.

Final output we get 

This is how synchronous Programming works.

Now let’s see Javascript as Asynchronous ?

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.

Let us first seeWhat is Web Apis ?

These  are methods provided by the Browser that include methods like -> setTimeout, Fetch, DOM APIs and many more.

We will take example of SetTimeout

What is SetTimeout -> SetTimeout helps to execute the function after a certain amount of delay.

Lets See with a Example – 

Output 

This is how an Asynchronous mechanism comes in !!

First we should learn what is a Callback function?

Callback functions are functions which are passed as a parameter in a function.

In Above example the f1() is a callback function , which is passed as a parameter in the setTimeout function.

Lets See How the code is executed ?

JavaScript maintains a queue of callback functions Called as a Callback Queue.

JavaScript Engine executes functions in Call Stack , But Call Back functions are executed in some different manner.

The JavaScript Engine maintains a loop , continuously checking the Call Stack and Callback Queue. The Callback function is always pushed into the Callback queue and When there is no more function to execute in Call Stack and CallStack is Empty , the loop pulls the function from the Callback Queue  and pushes it into the Call Stack and the Callback function gets executed. The loop continues.This loop is Known as Event Loop.

Step – 1 –  The f3() function is pushed into the Call Stack and “Function 3 is Called “  is  printed in the console.

Step – 2 – SetTimeout takes Place in WebAPI.

Step – 3 – Callback Function f1() is pushed in the Callback Queue.

Step – 4 – The f2() function is pushed in the Call Stack and “Function 2 is Called “  is  printed in the console.

Step – 5 – Now the Call Stack is Empty and the event loop pulls f1() callback function from Call back Queue and pushes it into Call Stack and “Function 1 is Called “  is  printed in the console.

I hope it is clear how the Asynchronous part of Javascript works internally.