Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 3 · 5 / 7Promises and await
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Promises and await
01 / 10Overview

Promises and await

You'll learn why some results arrive later, what a promise is, and how await waits for one without freezing the app.

Why it mattersLoading weather, saving to the phone, logging in: all of it takes time. Every app you build will wait for something with await.
about 2 h·needs: Functions in, values out, Arrow functions, Events and handlers
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Video
JavaScript promises in 10 minutesYouTube · Web Dev Simplified · 9 min · English
MMamun's noteWatch 0:00–8:44: what a promise is, then a worked example. Skip "Promise methods" after 8:44 for now.
Article
Async/awaitjavascript.info · 20 min · English
MMamun's noteRead "Async functions" and "Await". Go slowly; run the small examples yourself. "Error handling" comes in the loading and errors topic.
VideoOptional
The async await episode I promisedYouTube · Fireship · 8 min · English
MMamun's noteFast, but very clear on the order things run in. Watch 0:00–7:28, from the event loop to async and await basics. The rest is advanced.
VideoOptional
JavaScript Bangla tutorial #85: async await explainedYouTube · Learn with Sumit · 19 min · Bangla
MMamun's noteIn Bangla. Sumit explains async and await step by step. Watch it if await still feels like magic.
03 / 10

See it step by step

Watch await pause one function while the rest of the program carries on.

Nothing in memory yet.
weather.js
1async function showWeather() {
2 console.log("Loading...");
3 const temp = await getTemp("Dhaka");
4 console.log("Dhaka:", temp);
5}
6showWeather();
7console.log("You can still scroll");
The program calls showWeather. Its body starts running now.
Step 1 / 7
04 / 10

Explanation

Some jobs take time. Asking a server for Dhaka's weather may take a second. If JavaScript stood still and waited, the whole app would freeze: no scrolling, no tapping. So JavaScript starts the job, carries on with other work, and comes back when the result is ready. Code that finishes later like this is called asynchronous.

Think of ordering food at a restaurant. You get a token with a number. You don't stand at the counter; you sit down and talk. When your number is called, you collect the food. The token is a promise of food.

The simplest way to see "later" is setTimeout. It runs a function after a delay:

console.log("order placed");
setTimeout(() => console.log("food ready"), 2000);
console.log("talking with friends");
// order placed, talking with friends, food ready

A promise is that token in code: an object that says "a value is coming". While it waits it is pending. Later it is either fulfilled with a value, or it fails with an error. fetch, which you'll meet next, gives back a promise.

To get the value out, write await in front of the promise, inside a function marked async:

async function showTemp() {
  console.log("Loading...");
  const temp = await getTemp("Dhaka");
  console.log("Dhaka:", temp);
}

await pauses only this function. The rest of the program keeps going: taps, scrolling, other code. When the value arrives, the function continues from the await line, with temp filled in.

People often forget await. Then temp is not a number but the token itself, and the console prints Promise { <pending> }. If you see that, look for a missing await. Also, await only works inside an async function (or at the top of a module).

When you read async code, number the lines in the order they will run. Code before await runs now. Code after await runs later, after everything else that is ready to go.

Words to recognise
asynchronoussetTimeoutpromiseasyncawaitpending
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1console.log("1. Sending money");
2
setTimeout(() => {
Mentor note · line 3
setTimeout hands over a function to run after 2000 milliseconds, which is 2 seconds. It does not wait here.
4 console.log("3. SMS arrived");
5}, 2000);
6
console.log("2. Back to the home screen");
8
async function showTemp() {
const temp = await getTemp("Dhaka");
11 console.log("Dhaka:", temp);
12}
13showTemp();
const forgot = getTemp("Dhaka"); // Promise { <pending> }
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1console.log("1. order placed");
2setTimeout(() => {
3  console.log("2. food ready");
4}, 1000);
5console.log("3. watch cricket");
What does this print?
DrillPredict2 / 2
1async function getScore() {
2  console.log("A");
3  const score = await Promise.resolve(250);
4  console.log("C", score);
5}
6getScore();
7console.log("B");
What does this print?
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3console.log("A"); setTimeout(() => console.log("B"), 0); console.log("C"); In which order do they print?
  2. 2 / 3const temp = getTemp("Dhaka"); prints as Promise { <pending> }. What is missing?
  3. 3 / 3When a function reaches await, what pauses?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Promises and await?

10 / 10

Done

You can now
Read code with setTimeout, async and await, and say in which order the lines print.
Next: Fetching real data Back to Phase 3
On this page
  1. 01Promises and await
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Promises and await
01 / 10Overview

Promises and await

You'll learn why some results arrive later, what a promise is, and how await waits for one without freezing the app.

Why it mattersLoading weather, saving to the phone, logging in: all of it takes time. Every app you build will wait for something with await.
about 2 h·needs: Functions in, values out, Arrow functions, Events and handlers
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Video
JavaScript promises in 10 minutesYouTube · Web Dev Simplified · 9 min · English
MMamun's noteWatch 0:00–8:44: what a promise is, then a worked example. Skip "Promise methods" after 8:44 for now.
Article
Async/awaitjavascript.info · 20 min · English
MMamun's noteRead "Async functions" and "Await". Go slowly; run the small examples yourself. "Error handling" comes in the loading and errors topic.
VideoOptional
The async await episode I promisedYouTube · Fireship · 8 min · English
MMamun's noteFast, but very clear on the order things run in. Watch 0:00–7:28, from the event loop to async and await basics. The rest is advanced.
VideoOptional
JavaScript Bangla tutorial #85: async await explainedYouTube · Learn with Sumit · 19 min · Bangla
MMamun's noteIn Bangla. Sumit explains async and await step by step. Watch it if await still feels like magic.
03 / 10

See it step by step

Watch await pause one function while the rest of the program carries on.

Nothing in memory yet.
weather.js
1async function showWeather() {
2 console.log("Loading...");
3 const temp = await getTemp("Dhaka");
4 console.log("Dhaka:", temp);
5}
6showWeather();
7console.log("You can still scroll");
The program calls showWeather. Its body starts running now.
Step 1 / 7
04 / 10

Explanation

Some jobs take time. Asking a server for Dhaka's weather may take a second. If JavaScript stood still and waited, the whole app would freeze: no scrolling, no tapping. So JavaScript starts the job, carries on with other work, and comes back when the result is ready. Code that finishes later like this is called asynchronous.

Think of ordering food at a restaurant. You get a token with a number. You don't stand at the counter; you sit down and talk. When your number is called, you collect the food. The token is a promise of food.

The simplest way to see "later" is setTimeout. It runs a function after a delay:

console.log("order placed");
setTimeout(() => console.log("food ready"), 2000);
console.log("talking with friends");
// order placed, talking with friends, food ready

A promise is that token in code: an object that says "a value is coming". While it waits it is pending. Later it is either fulfilled with a value, or it fails with an error. fetch, which you'll meet next, gives back a promise.

To get the value out, write await in front of the promise, inside a function marked async:

async function showTemp() {
  console.log("Loading...");
  const temp = await getTemp("Dhaka");
  console.log("Dhaka:", temp);
}

await pauses only this function. The rest of the program keeps going: taps, scrolling, other code. When the value arrives, the function continues from the await line, with temp filled in.

People often forget await. Then temp is not a number but the token itself, and the console prints Promise { <pending> }. If you see that, look for a missing await. Also, await only works inside an async function (or at the top of a module).

When you read async code, number the lines in the order they will run. Code before await runs now. Code after await runs later, after everything else that is ready to go.

Words to recognise
asynchronoussetTimeoutpromiseasyncawaitpending
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1console.log("1. Sending money");
2
setTimeout(() => {
Mentor note · line 3
setTimeout hands over a function to run after 2000 milliseconds, which is 2 seconds. It does not wait here.
4 console.log("3. SMS arrived");
5}, 2000);
6
console.log("2. Back to the home screen");
8
async function showTemp() {
const temp = await getTemp("Dhaka");
11 console.log("Dhaka:", temp);
12}
13showTemp();
const forgot = getTemp("Dhaka"); // Promise { <pending> }
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1console.log("1. order placed");
2setTimeout(() => {
3  console.log("2. food ready");
4}, 1000);
5console.log("3. watch cricket");
What does this print?
DrillPredict2 / 2
1async function getScore() {
2  console.log("A");
3  const score = await Promise.resolve(250);
4  console.log("C", score);
5}
6getScore();
7console.log("B");
What does this print?
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3console.log("A"); setTimeout(() => console.log("B"), 0); console.log("C"); In which order do they print?
  2. 2 / 3const temp = getTemp("Dhaka"); prints as Promise { <pending> }. What is missing?
  3. 3 / 3When a function reaches await, what pauses?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Promises and await?

10 / 10

Done

You can now
Read code with setTimeout, async and await, and say in which order the lines print.
Next: Fetching real data Back to Phase 3
On this page
  1. 01Promises and await
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

Some jobs take time. Asking a server for Dhaka's weather may take a second. If JavaScript stood still and waited, the whole app would freeze: no scrolling, no tapping. So JavaScript starts the job, carries on with other work, and comes back when the result is ready. Code that finishes later like this is called asynchronous.

Think of ordering food at a restaurant. You get a token with a number. You don't stand at the counter; you sit down and talk. When your number is called, you collect the food. The token is a promise of food.

The simplest way to see "later" is setTimeout. It runs a function after a delay:

console.log("order placed");
setTimeout(() => console.log("food ready"), 2000);
console.log("talking with friends");
// order placed, talking with friends, food ready

A promise is that token in code: an object that says "a value is coming". While it waits it is pending. Later it is either fulfilled with a value, or it fails with an error. fetch, which you'll meet next, gives back a promise.

To get the value out, write await in front of the promise, inside a function marked async:

async function showTemp() {
  console.log("Loading...");
  const temp = await getTemp("Dhaka");
  console.log("Dhaka:", temp);
}

await pauses only this function. The rest of the program keeps going: taps, scrolling, other code. When the value arrives, the function continues from the await line, with temp filled in.

People often forget await. Then temp is not a number but the token itself, and the console prints Promise { <pending> }. If you see that, look for a missing await. Also, await only works inside an async function (or at the top of a module).

When you read async code, number the lines in the order they will run. Code before await runs now. Code after await runs later, after everything else that is ready to go.

Words to recognise
asynchronoussetTimeoutpromiseasyncawaitpending

Some jobs take time. Asking a server for Dhaka's weather may take a second. If JavaScript stood still and waited, the whole app would freeze: no scrolling, no tapping. So JavaScript starts the job, carries on with other work, and comes back when the result is ready. Code that finishes later like this is called asynchronous.

Think of ordering food at a restaurant. You get a token with a number. You don't stand at the counter; you sit down and talk. When your number is called, you collect the food. The token is a promise of food.

The simplest way to see "later" is setTimeout. It runs a function after a delay:

console.log("order placed");
setTimeout(() => console.log("food ready"), 2000);
console.log("talking with friends");
// order placed, talking with friends, food ready

A promise is that token in code: an object that says "a value is coming". While it waits it is pending. Later it is either fulfilled with a value, or it fails with an error. fetch, which you'll meet next, gives back a promise.

To get the value out, write await in front of the promise, inside a function marked async:

async function showTemp() {
  console.log("Loading...");
  const temp = await getTemp("Dhaka");
  console.log("Dhaka:", temp);
}

await pauses only this function. The rest of the program keeps going: taps, scrolling, other code. When the value arrives, the function continues from the await line, with temp filled in.

People often forget await. Then temp is not a number but the token itself, and the console prints Promise { <pending> }. If you see that, look for a missing await. Also, await only works inside an async function (or at the top of a module).

When you read async code, number the lines in the order they will run. Code before await runs now. Code after await runs later, after everything else that is ready to go.

Words to recognise
asynchronoussetTimeoutpromiseasyncawaitpending