The Startup
Published in

The Startup

Javascript Promises: How do they work?

Photo by Fabian Grohs on Unsplash

The interesting thing about having kids is that you have to find new ways to explain seemingly simple concepts. Concepts that you’ve already known and understood for many years your children are just starting to get familiar with. To really get them to grasp something you need to connect what they already know to the new subject you’re teaching them. This way they can start creating bridges to the new concepts you are teaching them and understand new things much faster. It’s the same with learning to code and today we are going to apply this method to JavaScript promises.

The Before Time

Before we can jump into promises, we need to discuss why they are important in the first place.

Imagine that you’re making your favorite pasta dish. You’ve probably made this dish many times. You may start with getting a pot, filling it with water, putting it on the stove and you turn the stove on high. As you wait for water to boil you begin to make the rest of the dish. Once the water has started boiling you place the pasta in the water and continue cooking it.

However this time you notice that for some reason you have to complete the task of cooking the pasta to its completion before you can do anything else, this includes a lot of waiting. It’s like your stuck, locked into cooking the pasta even when the water isn’t even boiling and you could be preparing the rest of the meal!

This is called single threaded, where you can only complete one task at a time before you can move on to the next task and it’s a bummer. This locks you to waiting on a task to be completely finished before moving on. However, there is trick we can use to seemly get multiple things done at a time and it’s something we as people do all the time.

Enter asynchronous operations

Let’s rewind back to the previous illustration. You and I both know that if we were making our favorite pasta dish the first thing we do is put the water on to boil, while we are waiting for that to finish we start cooking other parts of the meal. Why does that make sense? Well, we know that sitting and literally watching a pot of water boil isn’t the best use of our time. After all, we are hungry!

This is asynchronous operations in Javascript in a nutshell, and it’s the foundation of promises. When we give Javascript a task that it will need to wait on, Javascript can put it to the side while it does its thing (like waiting a pot of water to boil) and when it’s ready for attention (or the water is boiling) it focuses on it and completes the task.

To create a promise in Javascript we do the following:

new Promise((resolve, reject) => {})

So how does this work? Well, we are creating a new Promise constructor (or function) that is passed resolve and reject arguments. Both resolve and reject are functions as well. You may ask , why do we need both? Let me explain with an illustration.

The Hungry Kid

If you have kids or know of people who have kids or if you remember being a kid (side note: most people were kids) You know that kids ask for a lot of stuff. I mean a lot of stuff. So let’s imagine it’s breakfast time and our kid asks for some breakfast. They ask for waffles, we then check the freezer and there are no waffles. So we tell the kid, ‘Sorry, you can’t have waffles. We don’t have any.’, The kid then asks for some cereal and milk for breakfast. We look in the pantry, we find cereal. We then look in the refrigerator and find milk, then we answer with, ‘Yes, you can have cereal and milk’.

This promise life cycle. When we make the request (or create the promise) we don’t know if what we request will actually be available. If it’s not available (like no waffles) the request is rejected. However, if the request is fulfilled (like the cereal and milk) then the promise or request is resolved.

Promises (or requests) can be in one of three states. Waiting, Resolved or Rejected. Let’s take a look at this illustration in code format.

The Code

If we look at the example above, we see that it’s exactly what we just talked about but in code format. This function takes in a parameter called waffles and returns a promise or request. If we have waffles then we resolve the request with the message ‘Yes, we have waffles’ and give the kid the waffles. If we don’t have waffles, then we reject with an error message ‘Sorry, we don’t have waffles’

This example is slightly more involved since we are dealing with two things. We could break this up into two promises since cereal and milk are in two different places. However, to keep this simple let’s say cereal and milk are in the same place.

We can see here that if we have both cereal and milk then we can fulfill or resolve the request with ‘Yes, you can have cereal and milk’ and give them the food. However, if we only have cereal but not milk we’ll need to reject the request. The same is true if we only have milk but not cereal, we’ll also have to reject the request.

Closing thoughts

I hope examining promises from this point of view will help you solidify how promises and the nature of asynchronous operations work. I know it helped me.

If you like what you read, feel free to checkout my other articles here too.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aaron Billings

Aaron Billings

Full Stack developer that follows the ABCs (Always Be Coding). If I’m not coding you can find me playing video games, or spending time with family.