Let's Understand Promises in JavaScript

Vivek Kumar Gupta — Sun, 10 Dec 2023 10:03:17 +0000

What are Promises?

Promise in Javascript is same as we commit a promise in real life. As we all know that promise is made for future, so definately, the outcome will also come in future, which makes the present state of promise is pending.
Their are 2 Possible outcomes of a Promise, either the promise will maintained or else it will be broken.

Similarly, In JavaScript, their are 2 possible outcomes of a Promise: Resolve or Reject.

Let's understand this statement with an example.

Suppose, You (Ram) and your friend (Sham) just passed Higher Secondary School and because you both are best friends, so you both decided take admission in the same college to do your bachelor's.

Now, there can be 2 possibility that:

Ram and Sham took admission in same college, which means promise is fulfilled or in other words Promise is Resolved.
Because of some reason Sham decided join his father's company directly after high school, which means promise which they made is broken or in other words Promise is Rejected.

Different States of Promise in JavaScript

When a Promised is created in JavaScript, it is first initialised with a state of pending.

Pending (Initial State, before the Promise succeeds or fails)
Resolved (Completed Promise)
Rejected (Failed Promise)

What is the need of Promises?

So, Vivek tell me one thing why do we need promises in javaScript instead why can't we use callbacks to make async calls?

Okay, So the answer of your question is:

We have callback functions in JavaScript. But, a callback is not a special thing in JavaScript. It is a regular function that produces results after an asynchronous call completes (with success/error).
While callbacks are helpful, there is a huge downside to them as well. At times, we may have one callback inside another callback that's in yet another callback and so on, now you're trapped in a callback hell. I'm serious! Let's understand this "callback hell" with an example.

function displayMessage(fn){
   fn("inside displayMessage");

   setTimeout(() => {
     fn("1st work done!");

     setTimeout(() => {
        fn("2nd work done!");

        setTimeout(() => {
           fn("3rd work done!")
        },3000);

     }, 2000);

   },1000);

   fn("all works are done!!");
}

function onDone(statement){
  console.log(statement);
}

displayMessage(onDone);

So, Now lets understand the code line by line:

In this example a function displayMessage is called which recieves a callback function, this displayMessage functions does a simple work that it logs that status of work completions. As we can see that there is a nesting of setTimeout inside every setTimeout(), this nesting can go on, this nesting of function inside another function is called callback hell.

Writing this type of code can create many production grade implication like:
- it makes the code performance slow,
- it impacts the readability of code, etc...

This is the reason why Promises are introduced.

Let's Understand how to write a Promise.

We have to create an instace of Promise class; Let's see how we can do that;


let p = new Promise((resolve, reject) =>{
  // your code
})

The constructor function takes an executor function which takes two arguments which are resolve and reject repectively.

Whenever the promise is resolved successfully their after we call the resolve parameter with the result.

 function myPromise(){
   let p = new Promise((resolve, reject) =>{
     setTimeout(() => {
       resolve("promise is resolved :)")
     }, 2000);
   });
   return p;
 }
 myPromise();

Whenever the promise is not resolved their after we call the reject parameter with a error.

 function myPromise(){
   let p = new Promise((resolve, reject) =>{
     setTimeout(() => {
       reject("promise failed to resolved :(")
     }, 2000);
   });
   return p;
 }
 myPromise();

Now to get the output of the promise their are 2 methods:

.then syntax
async/await syntax

let me tell you that async/await syntax is most prefered way to get the output of a Promise.

Let's us see how we can get the output using .then method


function myPromise(){
  return new Promise((resolve, reject) =>{
    setTimeout(() =>{
      resolve("promise resolved :)")
    },2000)
  })
}

myPromise().then((data) =>{
  console.log(data);
})

//output: 
  promise resolved :)

Here, while using this method .then takes a callback function which recives the data that is returned by the function. Inside that function we can perform any operation which is required by the program.

Let's us see how we can get the output using async/await method


function myPromise(){
  return new Promise((resolve, reject) =>{
    setTimeout(() =>{
      resolve("promise resolved :)")
    },2000)
  })
}

async function getResult(){
  const data = await myPromise();
  console.log(data);
}


getResult();

//output: 
  promise resolved :)

Here, while using async/await syntax we initialise an async function inside which we call the myPromise function with await keyword before it.

This await keywords stops the excetion further down the line until the promise is not resolved.

As soon as the promise is resolved we can perform any operation which we want, in this case we have logged the data.

How errors are handled in promises

Both .then and async/await have different syntax for error handling.

First let's dig into .then() syntax.

Whenever we use .then() to consume the output of the promise we use .catch to handle the error.

Let's see how?


// refering to above example
// if promise is rejected then .catch catches the error

myPromise().then((data) =>{
   console.log(data);
}).catch((error)=>{
  // whatever errror we get

  console.log(error);
})

using this way the error is handle.

But when we use Async/Await we write our code inside something known as try/catch block


// refering to above example

const consumer = async () => {
  try{
    const data = await myPromise();
    console.log(data);
  } catch(error){
    // whatever errror we get
    console.log(error);
  }
}

consumer();

Advantage over Promises over Callbacks

Better Readability: Promises are a more structured and readable way of handling asynchronous operations. Promises allow you to chain multiple asynchronous operations together, Which makes the code more concise and clean as well as less bug-prone.
CallBack Hell: Promises help you to avoid callback hell, which occurs when you have nested callbacks that can become more difficult to find out bugs and manage.
Error Handling: Promises have built-in error-handling mechanisms to allow you to handle errors more easily.
Value return Ability: Promises allow you to return a value from an asynchronous operation, That can be helpful when you try to pass data from one asynchronous to another.

Hope this article clears the topic.
If you like this article then please like, share it on socials, comment your thoughts.

Let's Talk about Event Loop in JavaScript

Vivek Kumar Gupta — Thu, 07 Dec 2023 07:34:06 +0000

Before knowing what is Event Loop, we need to understand the nature of Javascript.

As we all know that JavaScript is a Single-threaded language which means that it can excecute only a single line code at a time unlike other programming languages like C++/Java.
Javascript engine excecutes the code from top to bottom. It creates an execution context, and inserts, removes the function in and out of the call stack while the code is getting executed.
While the code is getting executed if it strikes a function that performs a very long task then rest of the code cannot be executed until the current function is not completed its execution.
Lets take an example to understand this point -

Explaination:
- Output of the code:

   Start of the program
   program completed

In this code, we can see that the first console.log() printed as soon the code started to geeting execute but inside the function runner(), the while loop blocks the execution the last console.log(), this a perfect example which explains that javascript is single-threaded language.

To solve this problem event loop comes into picture with the help of which Javascript performs asynchronous tasks/operations and creates an illusion of multi-threading.

Components of a Web Browser -

JavaScript Runtime
- Heap Memory
- Call Stack
Web APIs
Event Loop
Queues:
- MicroTask Queue
- MacroTask Queue (aka. Callback Queue)

Entry of Callback functions

To prevent a blocking function from blocking other activities, we typically put it inside a callback function to execute it after all other activities are are performed by the code.

Now, you are wondering that what the heck is a Callback function?

As mentioned that earlier that Web browser have other components as well other than JS Engine.

To Understand Callback function lets take an example.

When you call the setTimeout() function, make a fetch request, or click a button, the web browser can do these activities concurrently and asynchronously.
The setTimeout(), fetch requests and DOM events are parts of the Web APIs of the web browser.
In our example, when calling the setTimeout() function, the JavaScript engine places it on the call stack, and the Web API creates a timer that expires in 1 second, till then rest of the code gets executed.
Then JavaScript engine places the task() function into a queue called a callback queue or a task queue.

This is where Event Loop comes into picture

The Event loop facilitates this process,
- It constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.

Hope the topic was cleared and now you have a better understanding of Event loop in JavaScript
Thankyou

DEV Community: Vivek Kumar Gupta