swizec.com

## JavaScript promises are just like monads and I can explain both in less than 2 minutes

There's a joke in functional programming that once you understand monads, it becomes impossible to explain them to others. The amount of monad tutorials on the internet is growing almost exponentially 😁

Monads are a funky concept that's nearly impossible to understand in all of its nuance. Maybe I'm just not smart enough. That's why I'm not going to explain any of that.

Screw the mathematical definition. Look at this shit 👇

o.O wat O.o

Here's a handwavy explanation instead: Monads are like a bubble. They wrap your dirty values and protect the rest of your code from weird effects.

I used the continuation monad as an example because it is similar to JavaScript Promises. A way to talk about the future. 1

Let's pretend you're a mouse looking for the ultimate question to life, the universe, and everything. You build a super computer that will calculate the answer, and you call it Earth.

You know Earth will take around 4.54 billion years to calculate the question. But you're writing the code right now. You can't wait 4.54 billion years to finish your project.

What do you do? You put Earth in a time bubble.

Like this:

`function getQuestion() {return Earth().then(ArthurDent => ArthurDent.subconscious()).then(subconscious => Scrabble.output(subconscious))}`

### Curated JavaScript Essays

Get a series of curated essays on JavaScript. Lessons and insights from building software for production. No bullshit.

Join over 14,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

In The HitchHiker's Guide to The Galaxy, Arthur Dent was the final result of a 4.54 billion year calculation. He mindlessly picked letters out of a pile of Scrabble™ tiles, and the result produced the ultimate question.

That means our `getQuestion` function first constructs an Earth, then gets `ArthurDent`, accesses his subconsciousness, and uses Scrabble™ to print the result. 🤙

## Here's what that looks like in practice:

Let's compare promises to callbacks. You're likely to have met with callbacks before, JavaScript is full of them.

```let theFuture = function (callback) {  setTimeout(callback, 5000)}.css-13aqjzy{display:inline-block;}
theFuture(() => {  console.log("It is now 5 seconds later")})```

We turn `theFuture` into a Promise and trigger its `resolve` method after 5 seconds. The `Promise` wrapped everything inside its body into a protective time bubble.

With a promise, we can pass `theFuture` around and do all sorts of stuff. But if we want to access the future, we have to use `.then` and give it a function.

When I first saw this, I thought "So what's the big deal? This is the same as callbacks.”

So here's the big deal: Once you're in a promise, you're always in a promise. Because promises are like monads 😁

Check out this simplified real world example from my day job.

```makePurchase(){    this.paymentView          .fetchPaymentInfo()          .then(paymentInfo  => this.finishPurchase(paymentInfo))      .then(token => this.showSuccessModal())      .catch(error => console.error(error));}
fetchPaymentInfo(){    if (this.paypal) {        return this.getPaypalPaymentInfo(); // returns promise    }else{        return this.getCCPaymentInfo(); // returns promise    }}
getPaypalPaymentInfo(){    return this.brainTreeClient                         .tokenizePaypal()                         .then(response => {                 return response.paymentInfo;                         });}
finishPurchase( paymentInfo ) {    return fetch('/purchase/path')                        .then(response => response.json())                        .then(json => {                            if (json.token) {                                return json.token;                            }else{                                throw new Error("Purchase failed")                            }                        });}```

Don't worry about the behind-the-scenes details of that code. Here's what you should focus on:

1. The main `makePurchase` function does everything through Promise access. The `.then` and `.catch` methods are like peeking into the Promise time bubble. You're saying: Once this time bubble resolves, I want to do so and so with the result.
2. The `fetchPaymentInfo` is the first method in our chain that creates a Promise. From then onwards, we can access returned values only through `.then` and `.catch`. It uses `getPaypalPaymentInfo` and `getCCPaymentInfo` to talk to Braintree, which is an operation that takes some time.
3. `braintreeClient.tokenizePaypal()` returns a promise. There's no need to wrap this in another Promise inside `fetchPaymentMethod`. You can return it like any normal value.
4. `getPaypalPaymentInfo` uses `.then` to look into the Braintree response. Since you're in a Promise, you can `return` flat values without worry. They're already wrapped in a Promise.
5. As a result, we can chain multiple `.then` calls in `makePurchase`. Some methods return a regular value, some return a Promise. JavaScript don't care, it's all the same because everything returned from a Promise is a Promise.

And that's why Promises are just like monads.

Oh, and error handling. Don't worry about that either. As long as there's a `.catch` call somewhere in the chain, you're good. Errors bubble up through the chain of Promise look-into-s until they encounter a `.catch`.

Hope that helps, it took me months of practice to grok 🤓

1. Technically continuations are more similar to callbacks, but bear with me.

Published on September 21st, 2017 in Technical, JavaScript

## Want to become a JavaScript expert?

Learning from tutorials is great! You follow some steps, learn a smol lesson, and feel like you got this. Then you go into an interview, get a question from the boss, or encounter a new situation and o-oh.

Shit, how does this work again? 😅

That's the problem with tutorials. They're not how the world works. Real software is a mess. A best-effort pile of duct tape and chewing gum. You need deep understanding, not recipes.

Leave your email and get the JavaScript Essays series - a series of curated essays and experiments on modern JavaScript. Lessons learned from practice building production software.

### Curated JavaScript Essays

Get a series of curated essays on JavaScript. Lessons and insights from building software for production. No bullshit.

Join over 14,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

Ready to Stop copy pasting D3 examples and create data visualizations of your own?  Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️

Created by Swizec with ❤️