You might have heard JS is asynchronous, non-blocking, single threaded language. Well that is not entirely true, in reality, core Js is synchronous blocking single threaded language.

👉 Synchronous means that the lines of code will be executed in a sequence.

👉 Single threaded means that only a single line of code will be executed at one time.

When people say JS is an asynchornous language they are just talking about the result of combination of JS + Browser, it is the browser that gives the power of being asynchronous to JS.

Problem in being Synchronous Single Threaded Language

Let’s say we have multiple functions and one the function takes a decent amount of time to generate a output or return output.

Now while this function executes and returns an output the user cannot do anything in the website, basically the whole UI gets blocked, now this is a very big problem since we have to make network calls in order for websites to function.

To takcle these kinds of problems asynchronicity comes to the rescue.

Asynchronous JS

👉 Contrary to Synchronous the word Asynchronous means not ocurring in a sequence.

Asynchronous programming is a technique which enables us to start a potentially long running function or task without making the UI unresponsive to the user.

As soon as the task is finished the program is presented with the result.

Callbacks

Callbacks are the earliest way to Handle asynchronous operations.

A callback is a function that is passed as an argument to another function, with the expectation that it will be executed or called sometime later in the future.

The most simple example of a callback function is handling a button click.

In the code below we are listening for any click event on the button and passing myCallbackFunc as call back function so whenever Js registers a click on the button myCallbackFunc will be called/executed.

const myBtn = document.querySelector('.myBtn')

function myCallbackFunc(){
console.log('Hello World")
} 

myBtn.addEventListener('click',myCallbackFunc)

👉 This way we can also Handle asynchronous Network requests.

Callbacks are good for simple operations, but it gets messy when we have to perfrom multiple operations that depend upon previous operations. We have to nest our functions, which results in infamous Callback hell or pyramid of doom.

Promises

To deal with the problem of callback hell In ES6 Promises were Introduced.

Promises are special JS objects that represent fulfillment, failure or pending state of an asynchronous operation.

Promises have three states:

1. Pending: The operation is not completed yet.
2. Fulfilled: The operation is successful.
3. Rejected: The operation is failed.

Syntax to create a promise:

const promise = new Promise((resolve,reject)=>{
...code
})

Here i have just tried to give a gist of promise, if you want to read about promise in detail i have already written a blog on it head over here.