Module 8 · Asynchronous JavaScript

Web APIs

Intermediate11m read12m practice23m total

Web APIsRuntimeTimersDOM EventsHost Environment

Introduction

Web APIs are capabilities provided by the browser or worker runtime around the JavaScript engine. They include timers, DOM events, network APIs, storage, observers, and messaging.

This distinction matters because the engine executes JavaScript, but the runtime schedules async work. setTimeout is not defined by ECMAScript; the host provides it and later queues its callback as a task.

Why This Matters

Interviewers often ask, Is setTimeout part of JavaScript? The best answer is precise: it is a host API available in browsers and many other runtimes, not a core language feature. That precision helps you separate language semantics, engine behavior, and runtime scheduling.

Theory

Engine versus runtime

A JavaScript engine understands language syntax and semantics: functions, objects, promises, lexical environments, and the call stack. A browser runtime adds APIs that let JavaScript interact with the outside world: timers, the DOM, user input, network requests, storage, and rendering.

What happens when you call a Web API

When code calls setTimeout(callback, 0), the call itself runs synchronously. The runtime records the timer. When the delay has elapsed and the current task can eventually yield, the callback becomes eligible to enter a task queue. The callback does not sit on the call stack while waiting.

For DOM events, the browser listens outside your JavaScript call stack. When a click happens, the browser queues an event task that later invokes your listener.

For promises, be careful: the Promise constructor and state machine are part of JavaScript, but promise reactions are scheduled as microtasks by the host integration. Network APIs such as fetch return promises, but the network work itself is performed by the host.

Web Worker sandbox mental model

In a worker, you still have timers, promises, microtasks, and the event loop, but not the DOM. That is why safe interview playground snippets should stick to console.log, setTimeout, Promise, and queueMicrotask unless they are explicitly browser-page examples.

Common API categories

Timers: setTimeout, setInterval, clearTimeout, clearInterval.
Events: DOM events, message events, worker messages.
Network: fetch, WebSocket, server-sent events.
Observers: MutationObserver, ResizeObserver, IntersectionObserver.
Scheduling and messaging: MessageChannel, postMessage, requestAnimationFrame in windows.

Visual Diagrams

Engine and host responsibilities


+-----------------------------+
| JavaScript engine           |
| - parses and executes code  |
| - manages call stack        |
| - implements promises       |
+--------------+--------------+
               |
               | calls host API
               v
+-----------------------------+
| Browser or worker runtime   |
| - timers                    |
| - events                    |
| - network                   |
| - queues callbacks          |
+-----------------------------+

The engine runs JavaScript; the host supplies APIs that schedule future work.

Timer delegation


Call stack: setTimeout(callback, 0)
      |
      v
Web API timer starts outside the stack
      |
      v
Delay elapsed
      |
      v
callback enters task queue
      |
      v
event loop runs it when stack is empty and microtasks are drained

The callback waits in the runtime, not on the JavaScript call stack.

Code Examples

DOM events are host-provided tasks

The browser observes the click and later invokes your listener as an event task.

Loading…

Network work is host work; promise handling is JavaScript-facing

fetch is a browser API. It returns a promise; the network request is handled by the host, and your .then callback runs as a microtask once the promise settles.

Loading…

Playground

Loading editor…

Console

Press Run to execute the code and see output here.

Output Prediction

Predict the output #1

javascript

1 
2console.log('script');
3 
4setTimeout(function () {
5  console.log('timeout callback');
6}, 0);
7 
8console.log('after scheduling');

Predict the output #2

javascript

1 
2console.log('A');
3 
4setTimeout(function () {
5  console.log('B');
6}, 0);
7 
8queueMicrotask(function () {
9  console.log('C');
10});
11 
12console.log('D');

Coding Exercises

Wrap a timer as a callback API

Easy

Implement delayMessage(message, delay, callback) so it waits for delay milliseconds and then calls callback(message). Keep the API callback-based, not promise-based.

Interview Questions

1Is `setTimeout` part of the JavaScript language?

No. setTimeout is a host API provided by browsers, workers, Node.js, and other runtimes. ECMAScript defines the language and promises, but timers come from the environment. The timer callback is later queued as a task.

Asked at:AmazonGoogle

Follow-ups

Where does the callback wait while the timer is pending?
Why does the callback not block the call stack?

2What is the difference between a JavaScript engine and a browser runtime?

The engine parses, compiles, and executes JavaScript and manages the heap and call stack. The browser runtime surrounds the engine with Web APIs, queues, rendering, networking, storage, and the event loop integration that schedules callbacks.

Quiz

1. Where does a timer wait after `setTimeout(callback, 1000)` is called?

2. Which statement is most precise?

Summary

Web APIs are supplied by the host environment, not by ECMAScript itself.
Calling a host API is synchronous; the async completion is queued later.
Timer and event callbacks usually enter task queues.
Promise reactions use the microtask queue once a promise settles.

Cheat Sheet

Engine: runs JavaScript syntax and semantics.

Runtime: adds timers, DOM, events, network, storage, rendering, and queues.

Timer flow: call setTimeout → host tracks delay → callback enters task queue → event loop runs it later.

Interview phrasing: setTimeout is a host API, not core ECMAScript.