Async Functions and Await

Async Functions and Await | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 30 MIN OF ACTIVE PRACTICE

Learn Async Functions and Await step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Start independent operations before awaiting them
Use try/catch only where recovery is meaningful
Return or await every Promise you create
Implement sequential and concurrent workflows, then explain why their start times differ.

DEEP EXPLANATION

Build the complete mental model

Build the mental model

Calling an async function immediately returns a Promise. A returned value becomes fulfillment and a thrown error becomes rejection. await unwraps fulfillment or throws the rejection inside the surrounding async function. It pauses that function's continuation, not the browser, server, or other scheduled work. Before writing more syntax, name the values involved in Async Functions and Await, who creates them, and which result or effect the program promises. Trace the smallest example by hand and identify any browser or runtime API separately from the language feature. A useful mental model should predict a changed input, not merely describe the demonstration after it runs.

Use the API deliberately

Execution order depends on when Promise-producing functions are called. If operation B requires A's result, await A before starting B. If they are independent, call both first and coordinate with Promise.all. Use allSettled when every outcome must be reported; use Promise.any for the first fulfillment when that matches product behavior. During implementation, keep the async rule in a focused function or event boundary with explicit inputs. Choose names that reveal the domain, keep calculation separate from document, console, storage, or network effects, and prefer the narrowest API that expresses the problem. Compare this design with one reasonable alternative and explain why the selected construct makes ownership or control flow clearer.

Handle boundaries and tradeoffs

Catch an error where the code can add context, select a fallback, retry safely, or show recovery. A catch that returns undefined without explanation changes a failure into misleading success. finally is useful for cleanup such as clearing a pending indicator, but it should not obscure whether the operation fulfilled or rejected. Verification for Async Functions and Await must cover an ordinary case, an empty or missing case, invalid input, and the most important threshold. Predict each result before running it, then locate the first value that violates the contract when reality differs. Record the corrected case as a repeatable check and explain which product behavior should occur instead of allowing undefined, NaN, stale data, or silent failure to spread.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Primary worked example

Trace this Async Functions and Await example from validated input to returned value or visible effect before editing it.

async function loadDashboard(loadProfile, loadProjects) {
  const profilePromise = loadProfile();
  const projectsPromise = loadProjects();
  const [profile, projects] = await Promise.all([profilePromise, projectsPromise]);
  return { profile, projects };
}
const delay = value => Promise.resolve(value);
console.log(await loadDashboard(() => delay({ name: "Mina" }), () => delay(["DOM"])));

Example 2: Second worked example

This variation changes the shape of the problem so you can compare the underlying async contract instead of copying one solution.

async function saveWithStatus(save, setStatus) {
  setStatus("saving");
  try {
    const result = await save();
    setStatus("saved");
    return result;
  } catch (error) {
    setStatus("failed");
    throw new Error("Unable to save progress", { cause: error });
  }
}

How to trace this lesson

Write down the exact inputs used by Async Functions and Await.
Predict each returned value and observable effect before running the example.
Mark the first boundary where invalid or missing data could enter.
Verify the ordinary, empty, invalid, and threshold cases independently.

Common mistakes and corrections

Awaiting independent requests one by one creates a network waterfall even though the code looks tidy.: Make the async rule explicit and cover it with a focused example.
Changing several parts of the example before explaining the original result.: Make one change at a time and compare it with a written prediction.
Testing only the demonstration's happy path.: Add missing, invalid, empty, and boundary inputs that exercise the stated contract.

PRACTICE LADDER

Move from recognition to independent work

1
Start independent operations before awaiting them
2
Use try/catch only where recovery is meaningful
3
Return or await every Promise you create
4
Implement sequential and concurrent workflows, then explain why their start times differ.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Core rule

Applied boundary

RUNNABLE EXAMPLE

Change one assumption at a time

Predict the output, run the example, then change one input and one boundary in the Async Functions and Await example. Explain every changed result before continuing.

async function loadDashboard(loadProfile, loadProjects) {
  const profilePromise = loadProfile();
  const projectsPromise = loadProjects();
  const [profile, projects] = await Promise.all([profilePromise, projectsPromise]);
  return { profile, projects };
}
const delay = value => Promise.resolve(value);
console.log(await loadDashboard(() => delay({ name: "Mina" }), () => delay(["DOM"])));

async function loadDashboard(loadProfile, loadProjects) {
  const profilePromise = loadProfile();
  const projectsPromise = loadProjects();
  const [profile, projects] = await Promise.all([profilePromise, projectsPromise]);
  return { profile, projects };
}
const delay = value => Promise.resolve(value);
console.log(await loadDashboard(() => delay({ name: "Mina" }), () => delay(["DOM"])));

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

const profile = await loadProfile();
const projects = await loadProjects();

Reveal repair and explanation

const [profile, projects] = await Promise.all([loadProfile(), loadProjects()]);

Independent work should be started together when the product requires both results.

INDEPENDENT LAB

Build without copying the example

Implement sequential and concurrent workflows, then explain why their start times differ.

// Define small functions before composing the complete solution.
// Implement sequential and concurrent workflows, then explain why their start times differ.

// Define small functions before composing the complete solution.
// Implement sequential and concurrent workflows, then explain why their start times differ.

Press Run to execute your code.

Self-review checklist Start independent operations before awaiting them Use try/catch only where recovery is meaningful Return or await every Promise you createWhat did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. What does every async function return? A Promise A timer ID A DOM node

2. Which evidence best demonstrates mastery of Async Functions and Await? A prediction, boundary tests, and an explained result A copied snippet with no changes One successful happy-path run

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering