What Web API does in the browser

JavaScriptJunior~4 min read

A Web API (Web Application Programming Interface) is a set of built-in capabilities the browser provides so that JavaScript can interact with its environment: windows, the document, the network, the user and devices. These APIs are not part of the JavaScript language itself, they belong to the browser or to another runtime, such as Node.js.

Theory

TL;DR

A Web API is an environment capability, not a language feature: the ECMAScript standard does not define it.
window, document, navigator, fetch, setTimeout, localStorage, all of these come from the browser.
The language handles logic and data, the Web API handles the DOM, the network, timers, events and devices.
Asynchronous Web APIs do their work outside the main JS thread.
When the work is done, the Web API puts the callback into a task queue and the Event Loop runs it once the stack is empty.
The main purpose of the Web API is to give JavaScript access to the browser and the device.

Quick example

javascript

console.log(window.innerWidth);
alert('Hello!');
document.body.style.background = 'lightblue';

Here:

window is a browser object, the Web API for controlling the window;
alert() is a Web API method that shows a dialog;
document is the Web API for working with the DOM, that is, with the page.

None of these objects is part of the JS standard (ECMAScript); the browser provides them so that JavaScript can work with a web page.

Who is responsible for what

Component	Where it comes from	What it is responsible for
JavaScript (ECMAScript)	The language	Logic, computation, data structures
Web API (browser)	The environment (Chrome, Firefox and so on)	Network, DOM, events, timers
Event Loop	A mechanism of the environment	Drives execution and the task queues

This is exactly why the same code can work in a browser and fail in Node.js: the language is the same, but the set of environment APIs is different.

The main groups of Web APIs

DOM API: working with the HTML document

Lets you read and change the structure of the page.

javascript

document.querySelector('h1').textContent = 'Hello, world!';

This group includes document, Element, Node, classList, style, dataset and others.

Network API: working with the network

Lets you make HTTP requests and handle responses.

javascript

fetch('https://api.github.com/users/octocat')
  .then(res => res.json())
  .then(console.log);

This group includes fetch, XMLHttpRequest, WebSocket, EventSource.

Timers API: deferred actions

javascript

setTimeout(() => console.log('In a second'), 1000);
setInterval(() => console.log('Every second'), 1000);

This group includes setTimeout, setInterval, clearTimeout, clearInterval.

Storage API: keeping data in the browser

javascript

localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme'));

This group includes localStorage, sessionStorage, IndexedDB, CacheStorage.

Multimedia and Graphics API

Working with the camera, the microphone, audio and video:

javascript

navigator.mediaDevices.getUserMedia({ video: true });

Working with graphics:

javascript

const ctx = canvas.getContext('2d');
ctx.fillRect(10, 10, 100, 100);

This group includes the Canvas API, WebGL, MediaStream and the Web Audio API.

Device and Hardware API

Geolocation API, for finding the current position;
Battery API, Clipboard API, Vibration API;
Sensor APIs, for access to the accelerometer, the gyroscope and so on.

javascript

navigator.geolocation.getCurrentPosition(pos => console.log(pos.coords));

Security and Identity API

Credential Management;
WebAuthn;
Permissions API;
Notification API.

javascript

Notification.requestPermission().then(console.log);

Events API: the event system

Lets you listen to user actions and system reactions.

javascript

button.addEventListener('click', () => console.log('Click!'));

This group covers mouse, keyboard, network, visibility and loading events, among others.

How the Web API works with the Event Loop

When you call, for example:

javascript

setTimeout(() => console.log('Later'), 1000);

this is what happens:

setTimeout is a Web API provided by the browser, not a language function.
The browser counts the time separately from the main JS thread.
When the timer expires, the Web API sends the task into the macrotask queue.
The Event Loop picks it up as soon as the call stack is free and hands it back to JavaScript.
JS runs the callback.

In other words, JS delegates the work to the browser through the Web API and does not wait for it. The Web APIs are the browser's workers, and JS is the manager handing out the tasks.

A simple analogy: JavaScript is the chef and the Web API is the kitchen, with all its appliances and assistants. The chef gives out tasks (boil the kettle, bake the pie), the equipment does the work and reports back when it is ready, and meanwhile the chef cooks other dishes.

Summary

Component	What it does
Web API	A set of functions and objects provided by the browser
Not part of JavaScript	Implemented in the browser engine: Chrome uses Blink, Firefox uses Gecko
Interaction	Through `window`, `document`, `navigator`, `fetch`, `setTimeout` and others
They work asynchronously	They put callbacks into the Event Loop queues
Main purpose	To give JS access to the browser and the device

Common mistakes

Treating setTimeout, fetch or localStorage as part of the language. They are environment APIs, so in Node.js or in a Web Worker the available set is different.
Touching window or document in code that runs on the server during SSR, where those objects simply do not exist.
Assuming setTimeout(fn, 1000) guarantees a call after exactly one second. That is a minimum delay: the callback waits for the stack to clear and for its turn in the queue.
Confusing the macrotask queue (timers, events) with the microtask queue (promises): microtasks always run first.
Expecting Web APIs to be available without the user's consent. Geolocation, camera, microphone and notifications all require explicit permission, and the request can be denied.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.