Modern JavaScript: Async, Fetch & APIs

Lesson 1 of 18

JavaScript runs on one thread

To understand asynchronous JavaScript — the foundation of fetching data, timers, and responsive apps — you first need to understand a key fact: JavaScript runs on a single thread. It does one thing at a time. This constraint is why async exists, and grasping it makes everything that follows click.

One thread: one thing at a time

Unlike some languages that run many operations simultaneously on multiple threads, JavaScript has one thread (the "main thread") that executes your code line by line, one statement at a time. It can't do two things at literally the same moment:

Try it Yourself
Loading editor…
Result

This is simple for normal code — it just runs top to bottom. But it creates a problem for slow operations, like fetching data over the internet or reading a file, which can take seconds.

The blocking problem

If JavaScript did one thing at a time and a slow task (say, fetching data) blocked the thread, the entire page would freeze while waiting — no clicks, no scrolling, nothing, until the task finished:

Try it Yourself
Loading editor…
Result

A frozen page is unacceptable. So JavaScript needs a way to start a slow task, continue running other code, and deal with the result later when it's ready — without blocking. That mechanism is asynchronous programming.

The solution: don't wait, get notified later

The core idea of async: for slow operations, JavaScript doesn't sit and wait. It starts the operation, immediately moves on to other code, and arranges to handle the result when it arrives. The slow work happens "in the background" (handled by the browser), and your code is notified when it's done:

Try it Yourself
Loading editor…
Result

Watch the output order: 1, 2, 3not 1, 3, 2. setTimeout schedules the function for later and JavaScript keeps going (printing "2"), then runs the delayed code ("3") when the timer finishes. JavaScript didn't block — it stayed responsive. This "start it, move on, handle it later" is the essence of async.

Why this matters

Almost everything slow in web development is asynchronous: fetching data from servers, timers, reading files, waiting for user actions. Because JavaScript is single-threaded, it must handle these asynchronously to stay responsive. The rest of this course is about the tools for managing async — callbacks, promises, and async/await — and using them to fetch real data from APIs. It all rests on this: one thread, so slow work happens asynchronously to avoid freezing.

The mistake beginners make

Assuming code always runs strictly top to bottom, waiting for each line — then being confused when async code (like setTimeout or fetch) runs "out of order" (the delayed part runs later, after subsequent lines). Understand that async operations start and let the code continue, with the result handled later. This mental model — synchronous code runs in order, but async operations defer their result — is the key to everything ahead. Don't expect async results to be available on the very next line.

Your turn

Try it Yourself
Loading editor…
Result

Your turn

  1. Understand JavaScript is single-threaded — it does one thing at a time, line by line.
  2. See why slow operations (like fetching) must be asynchronous — otherwise they'd freeze the whole page.
  3. Grasp the async model: start a slow task, continue running other code, handle the result later (see setTimeout's order).

Key points

  • JavaScript runs on a SINGLE thread — one statement at a time; it can't do two things simultaneously.
  • If slow operations (fetching, timers) blocked the thread, the whole page would freeze — unacceptable.
  • Async is the solution: start the slow task, continue other code, and handle the result LATER when it's ready.
  • So async results run 'out of order' (setTimeout's code runs after later lines) — don't expect them on the next line.

Q&A · 0

Enrol to ask questions and join the discussion.

No questions yet — be the first to ask.