Web APIs in JavaScript Explained

Web APIs in JavaScript Explained

Web APIs are functions provided by the browser (or Node.js) that run outside the JavaScript engine. They are the source of async behavior in JS.

What Web APIs Are

The JS engine (V8, SpiderMonkey, etc.) only knows JavaScript. It does not know about timers, network, DOM, or storage. These are provided by the host environment (the browser or Node.js) as Web APIs.

Common Web APIs

• Timers: setTimeout, setInterval, clearTimeout, clearInterval.
• Network: fetch, XMLHttpRequest, WebSocket.
• DOM: document.querySelector, addEventListener, createElement.
• Storage: localStorage, sessionStorage, IndexedDB, Cookies.
• Geolocation: navigator.geolocation.getCurrentPosition.
• Canvas: canvas.getContext("2d").
• Audio/Video: AudioContext, HTMLMediaElement.
• Workers: Worker, SharedWorker, ServiceWorker.
• **IntersectionObserver, MutationObserver, ResizeObserver`.

How They Interact With the Event Loop

1. You call a Web API (e.g., setTimeout(cb, 1000)).
2. The Web API starts the operation (starts a timer).
3. The JS engine continues running synchronous code.
4. When the operation completes, the Web API pushes the callback to a queue:
   • Promise-based APIs → microtask queue.
   • Callback-based APIs → macrotask queue.
5. The event loop moves the callback to the call stack when it is empty.

Example: setTimeout

console.log("before");
setTimeout(() => console.log("timer"), 1000);
console.log("after");
``
1. `"before"` logs (stack).
2. `setTimeout` hands the timer to the Web API. The engine continues.
3. `"after"` logs (stack).
4. After 1 second, the Web API pushes the callback to the macrotask queue.
5. The event loop moves it to the stack: `"timer"` logs.

### Example: `fetch`

```js
console.log("before");
fetch("/api").then((res) => console.log("data"));
console.log("after");
``
1. `"before"` logs.
2. `fetch` hands the request to the Web API. The engine continues.
3. `"after"` logs.
4. When the response arrives, the `.then` callback goes to the microtask queue.
5. The event loop runs it: `"data"` logs.

### Web APIs Are Not JavaScript

`setTimeout`, `fetch`, and `document` are not part of the JS language. They are provided by the browser. In Node.js, some are provided by the Node.js runtime (`fs`, `http`, `crypto`). The JS engine just calls them.

### The Takeaway

Web APIs are browser/runtime-provided functions that run outside the JS engine. They handle async operations (timers, network, DOM, storage). When done, they push callbacks to the microtask or macrotask queue. The event loop moves callbacks to the stack when it is empty. Web APIs are what make async JS possible.