Hey Folks ✋🏼

I have been using JavaScript for a bit longer now and I have found that there are still many developers who get confused with the Promises in JavaScript.

Okay, there is nothing to worry about it. Without any more talking, Let's start with Promises.

What is Promise?

A Promise is a special JavaScript object that links the “producing code” and the “consuming code” together. In terms of our analogy: this is the “subscription list”. The “producing code” takes whatever time it needs to produce the promised result, and the “promise” makes that result available to all of the subscribed codes when it’s ready.

Ahhh 😩, Too much technical, right?

Let's understand this with an example.

Basic Scenario for Example

Suppose, there is a result day at your school and you and all your classmates are waiting for the answer sheets. (Life was good when classes and exams were not online, right?).

Now, Your teacher starts giving you all the answer sheets and now your turn arrives.

You go to the teacher and collect your answer sheets and you are going back and all of a sudden you realize that your friend is not in the town and he told you to collect his answer sheets.

So, This is a basic scenario and now the concept of Promise will come into the picture

So now, You tell your teacher that your friend is not available and you need to collect his answer sheets. And you will request your teacher to provide his answer sheets.

And then the following process will occur in order

1. You have a request for the answer sheets.
2. Your teacher will start to find the answer sheets of your friend.
3. You will wait until you get the answer sheets.
4. You take the answer sheets from your teacher and go back to your place.

Correct?

Now, Let's understand this with JavaScript.

To perform the previous process in JavaScript, we will have a function

const requestToProvideAnswerSheets = () => {
  let foundAnswerSheets = null; 

  setTimeout(() => {
    foundAnswerSheets = ['subject1', 'subject2'];
  }, 2000);

  return foundAnswerSheets;
};

After creating this method, You will call this method.

const foundSheets = requestToProvideAnswerSheets();
console.log(foundSheets);
// Output: 
// null

And you will be like

Woah! This is not what I expected. Why the hell is this giving me null every time?? 😫

The answer is that You are smart and JavaScript is not.

JavaScript is a single-threaded language and it doesn't wait for asynchronous function calls.

While the teacher is finding the answer sheets, you knew that you have to wait for the teacher to find all the answer sheets.

But, while JavaScript calls that method, it does not know that it should wait for setTimeout (asynchronous call) to execute and it is returning null immediately.

And due to this, you are getting null every time.

So, What is the method to prevent this? How can I solve this?

The answer is Promise.

By using Promise, JavaScript gets to know that it has to wait for the execution to complete.

And this is how we can update the previous function with Promise.

const requestToProvideAnswerSheets = new Promise((resolve) => {
  setTimeout(() => {
    const foundAnswerSheets = ['subject1', 'subject2'];
    resolve(foundAnswerSheets);
  }, 2000);
});

Okay, I have done this but What now?

requestToProvideAnswerSheets.then((answerSheets) => {
  console.log(answerSheets);
});

// Output: 
// ['subject1', 'subject2']

This is how you can execute your Promise object and tell JavaScript to wait for the asynchronous function to execute.

Wrapping Up

So, This is how you can use Promise in JavaScript and how it can help you to execute the asynchronous calls.

You can found more about Promise in the following links. https://javascript.info/promise-basics

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise