What is a JavaScript Promise?

Promises or futures as they’re sometimes called represent a future value. This is useful when a value isn’t available right now, but it will be there sometime in the future.

A good way of thinking about Promises is using a real life analogy such as a mortgage. Let’s say I want to buy a house, but I don’t have £100,000 right now. The bank offers me a mortgage of £100,000 and signs an agreement (a bit like a token) that the money will be there sometime in the future. I can now use that agreement to continue to make an offer to the seller, and they’re happy knowing that agreement will eventually turn into the £100,000 they were expecting.

Another analogy, if I filled my car with petrol, and realised at the cash desk that I’d forgotten my wallet, I could give the cashier an item of mine to hold (possibly an item of value) while I go and grab my wallet. It’s a promise that the item will eventually turn into real money, which is what they were expecting all along. But in the meantime, just hold this item, i’ll be back in two minutes!

The point here is that there is no waiting (in theory), I didn’t have to wait to physically have £100,000, so I could go ahead and make an offer. And the cashier didn’t have to stop and could continue serving customers while I went to fetch() my wallet.

In JavaScript a function can return a promise object as a placeholder, this placeholder will eventually be exchanged for the real value, but in the meantime, just hold the promise object. This lets the JavaScript engine continue to do things rather than stopping and waiting for the real value.

But how do we setup what will happen once the real value appears? We use the .then() method on the promise object.

e.g myPromise.then(resolve, reject);

The success and fail are functions passed as arguments. If the real value arrives then the resolve function is called, otherwise if it fails the reject function is called.

Going back to the cashier example, the resolve function would be taking my money when I return and cashing it in the till. The reject function would be calling the police if I didn’t return.

A Promise has three states, (pending and then resolved or rejected). Once a promise has transformed into resolve or reject it can’t go back.

The .then() method lets you chain several together for example:

myPromise.then( doSomething(data) ).then( doSomethingElse(data) )

This lets you specify steps to take once a promise has resolved. Chaining also lets you carry out further Promises within Promises, essentially it allows you to specify what should happen and in what order, regardless of how long it takes the values to arrive.

For more information I recommend these two pages from MDN docs:

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

They give a really good guide to creating your own promises and using them to compose asynchronous software.

This post is part of a series explaining technical subjects in simple terms, inspired by a quote from physicist Richard Feynman "If you can’t explain something in simple terms, you don’t understand it", Stay tuned.