JavaScript Promises: Zero To Hero Plus Cheat Sheet

Joshua Saunders
DailyJS
Published in
6 min readOct 9, 2019

--

Photo by JJ Ying on Unsplash

It’s time, friend.

Maybe you’re new to web and trying to pick up the latest front-end tech, or maybe you’re a seasoned web developer, but have just been putting off fully understanding promises. async/await is a fresh take on asynchronous JavaScript, but it’s built upon promises, so it’s well worth understanding promises before getting into async/await .

Promises truly aren’t complicated but it can be hard breaking into them. This is because promises are their own type of design pattern — they may be a new paradigm to you in the same way that functional React components can seem foreign to those coming from an object-oriented background.

Luckily for you, my growing pains of learning JavaScript promises are still fresh in my memory and hopefully I can help you get through yours as fast as possible!

Quick question though — did you come here looking for async/await ? If you did, here’s a companion article on async/await !

Without further ado, Promises!

What The Heck Is A Promise

Semantically, a Promise represents an asynchronous task that will be done but potentially isn’t yet done. Personally, I understand promises a little better after getting a sense of what the code looks like.

Here’s a snippet of a bare-bones promise.

A Promise is a JavaScript class, and its constructor takes in a single argument: a function called the executor function. The executor function itself has two arguments called resolve and reject. The code inside the executor function runs and you call resolve() when you’re done and reject() if something goes wrong.

--

--

Joshua Saunders
DailyJS

Senior software developer at Klipfolio. I love writing about all things dev and faith. linkedin.com/in/jksaunders to connect!