DEV Community

Jaskirat Grewal
Jaskirat Grewal

Posted on • Updated on

JavaScript Promises for Beginners

To get the most out of this article, please make sure that you know basics about Synchronous and Asynchronous Programming and, if possible, about javascript callbacks.
However, I will try to keep most of the stuff away from these topics so that you can understand atleast 85% of it.


Understanding Promises

Suppose a friend comes to you for financial help and you promise him to give some cash after taking it out from an ATM.
--You go to the ATM, swipe your card, and find out that your account has been frozen due to some reasons and you can't take out your money.
-- Then, you go back to your friend and tell him that you can't give him money because your account is frozen. Hence, breaking your promise.

//You have made promise to your friend and you leave for bank
if (everythingGoesWell) {
return theMoney //Promise is fulfilled
}
else {
return "Account_Frozen" //Promise failed
}
Enter fullscreen mode Exit fullscreen mode


Promises are used in JavaScript to handle async operations. They are special objects that link the actual output (in above example, it's required money) and the reason due to which we may not get the output (Account Frozen).

States of a Promise

A JavaScript promise is either settled or pending. We can use the Promise constructor to create a promise.

var thePromise = new Promise(executor())
Enter fullscreen mode Exit fullscreen mode

The executor function is callback of the promise constructor. It takes two callbacks: resolve and reject, as arguments.

  1. The resolve callback is used when the promise is actually fulfilled. It takes the output value as its argument.
  2. The reject callback is used when the promise couldn't be fulfilled. It takes the reason as its argument.
  • When we create a promise it initializes in its pending state. Once the executor runs, the state changes to settled which can be either resolved or rejected.

Implementation: Code Snippet

Let's create a promise for our problem here:

var thePromise = new Promise(function(resolve,reject){
// Try to take out money from atm
withdraw(function(error,money) {
// If withdrawal failed, tell why
if (error) reject (error)
// else return the money
else resolve (money)
})
})
Enter fullscreen mode Exit fullscreen mode


Promises can be bit of hectic stuff if you don't have experience with callbacks and callback hells. But once you grasp this concept, there is no going back !

The then and catch clauses

  • The catch function is attached to promise which executes when the promise is rejected. It takes the error sent through reject method as an argument.
  • The then function is attached to promise which executes when the promise is resolved. It sends the value sent through resolve method as an argument.
  • There is a finally clause too. It is executed no matter the promise resolves or rejects. It takes no arguments.
var thePromise = new Promise(function(resolve,reject){
// Try to take out money from atm
withdraw(function(error,money) {
// If withdrawal failed, tell why
if (error) reject (error)
// else return the money
else resolve (money)
})
})

thePromise.then(function(money) {
// This function is executed when the above promise resolves and returns an //amount of money
})

thePromise.catch(function(error) {
// This function is executed when the above promise rejects due to an error
})

thePromise.finally(function() {
// This function is executed after the promise is resolved or rejected.
})
Enter fullscreen mode Exit fullscreen mode


Thank You! Feedback, suggestions and corrections are highly appreciated. Please write in comments %-)


Beginners in #webdev can go through my article here to have a look at how to build the base for web-development.

Top comments (6)

Collapse
 
imsikun profile image
Subhakant Mishra

One of the best explanation so far!
I really prefer 'then' and 'catch'

Collapse
 
thejscode profile image
Jaskirat Grewal

Thanks Man! Means a lot:-))

Collapse
 
ujjwalkarn954 profile image
Ujjwal Kumar Karn

Great! Bro.

Collapse
 
thejscode profile image
Jaskirat Grewal

Thanks :-)

Collapse
 
sumit profile image
Sumit Singh

A very good and simple explanation :)

Collapse
 
vppise profile image
Vikas Pise

well explained...