Promises in JavaScript: Explained for Kids

Callbacks, Promises and ES6 async await.

In this article, we will talk about asynchronous JavaScript. It’s not an easy topic, but I will explain it as simple and clear as I can so a kid can understand it.

First of all, let me tell you a story:

Once upon a time, there was a father and a son. They want to go boating together if it’s going to be sunny. Otherwise, they will find another way to spend their weekend.

First scene

Because it’s a small city and they don’t have the internet to check the weather, the father said:

Father: My son… you should climb the highest tree and check the weather.

Son: Sure, father.

Father: I will not go with you because I’m busy, but you must promise me to come back with an answer, no matter what. Based on your answer I will decide what we are going to do this weekend,

Son: I promise.

It’s important to understand that:
1) The father it’s really busy, so he will do other things while the son is checking the weather.

2) The son will return home and inform the father about what he saw.

Let’s see together what could happen:

1. The happy case:

When the son climbs the tree and it’s a sunny day. He will return home happy and on the weekend they will sail together.

2. Bad news:

It’s possible to have bad news. A rainy day it’s not what the kid wants, but sometimes we need to stay home (especially now, with the coronavirus pandemic). The son will return home and tell the father about all the clouds he saw. In this case, based on the answer, the father will decide to stay home and play board-games.

3. Unexpected error:

There is also a third option. Maybe, for some unpredictable reason, the son was not able to find out if it’s going to rain or not. There was a lot of fog or he couldn’t climb the tree… it doesn’t matter. The result is that we don’t know the weather.

Even in this case, the boy promised to come back with an answer so he will go home and explain to his father what happened…then…. the father will make a decision.

Now, let’s talk programming. JavaScript works in the same way.

Sometimes we want to do other things (the father) while we wait for an answer (from the son).

Let’s suppose we’re on amazon.com and want to search for a new TV. There are millions of products for sale so it will take 2–3 seconds to find the TV you want based on the title.

In the meantime, the browser can do other things unrelated to our search. (for example, opening a chat bot or painting the page).

After the 2–3 seconds, we will have an answer:

1. The product is available and we can buy it.
2. The product is out of stock and the store will recommend something different.
3. There was a problem in connecting to the database. In this case, the website will have to display an error message.

Ok, ok, it’s a nice story, but… how can I use it?

A) Using callbacks:

Callback example

I really don’t recommend using callbacks anymore. The code will be hard to understand and maintain. You can search for “callbacks hell” to find out more.

In our case, the father will wait for the son. But maybe the mother will have to wait until the father has a decision which has to wait until the son… you got it.

Callback hell

B) Using Promises

As an alternative to callbacks, JavaScript introduced Promises.

The main idea is very simple. A Promise will have 2 functions:

• Resolve: it’s called when the task is successful (the boy climbed the tree. It does not matter if it’s sunny or rainy, but we have our response)
• Reject: It happens when we encounter an error (the tree was on fire)

Promise example

It’s easier to read than callbacks, but it’s still a lot of code. We don’t have callback hell anymore, but we can have a promise hell :D

Promise hell

C) Async await — ES6

In 2015 JavaScript introduced a new syntax sugar for Promises.

You can find a lot of very good materials which explains the ES6 features, but as a general idea you need to understand 2 keywords:

• async: The function which awaits for something must be async. In our case, the father will be async and the boy will be a promise.
• Inside the async function we can use await. JavaScript will know to execute the rest of the code only after the awaited function is resolved.

ES6 Async await

Conclusion:

In programming, it is important to understand how something works and why. With this story you can explain callbacks, promises and async await to anyone, even a child.

Let me know what you think about this article and what other subjects deserve a story.

Credits:

Funny enough, a similar story I read when I was learning JavaScript. It’s an old article about AngularJS wrote by Andy Shora, but the idea behind it it’s the inspiration for this article.

You can check it here:

Promises in AngularJS, Explained as a Cartoon

Let me know what you think about this article and what other subjects deserve a story.