Web APIs vs JavaScript built-ins?

JavaScript built-ins (Array, Promise, Math) are part of the language spec (ECMA-262) and work everywhere. Web APIs are defined by W3C/WHATWG specs and provided by the host environment (browser). Node.js has different APIs than browsers.

Why are Web APIs asynchronous?

They run on separate browser threads to avoid blocking the JS main thread. A network request or timer runs in C++ code while JS continues executing. When complete, the callback is queued for the event loop.

How do I check if an API is available?

Feature detection: if ('IntersectionObserver' in window) { } or if (navigator.clipboard) { }. Never assume an API exists — use polyfills or fallbacks for older browsers.

What about Web Workers?

Web Workers run JavaScript on a separate thread with no access to DOM. They communicate via postMessage. Use them for CPU-heavy tasks (image processing, parsing) that would block the main thread.

JavaScript Web APIs

Browser superpowers that JavaScript can access. Timers, network, DOM, and more.

Module 10 · Browser Internals & Best Practices

Production JavaScript requires more than syntax. The event loop, rendering pipeline, bundlers, debugging techniques, performance optimization, design patterns, testing, and security practices separate hobby scripts from professional software.

Learn Web APIs in JavaScript — covering What Are Web APIs, Timer APIs, Observer APIs, Communication APIs with interactive visual examples and step-by-step explanations.

About this module

Writing JavaScript that works in a tutorial is different from writing JavaScript that ships to production. The event loop explains why setTimeout(0) does not run immediately. Performance profiling finds bottlenecks before users do.

This module covers the internals and best practices that separate hobby scripts from professional software: debugging, bundlers, design patterns, testing strategies, and security fundamentals every developer should know.

Why this matters

Understanding web apis is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals — and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.

Key topics covered

What Are Web APIs
Timer APIs
Observer APIs
Communication APIs
Utility APIs

Where you'll use it

Building interactive web applications with web apis
Processing and transforming data in frontend and backend code
Writing cleaner, more maintainable JavaScript modules
Debugging and reviewing code during development

What Are Web APIs

APIs provided by the browser, not the JavaScript language.

// JavaScript (the language) has:
// - Variables, functions, objects, arrays
// - Promises, async/await
// - Math, Date, JSON, RegExp

// Web APIs (provided by the browser) have:
// - DOM manipulation (document.querySelector)
// - Timers (setTimeout, setInterval)
// - Network (fetch, XMLHttpRequest)
// - Storage (localStorage, sessionStorage)
// - Geolocation, Canvas, Audio, WebSocket...

// These are NOT part of JavaScript itself!
// They're C++ code in the browser, exposed to JS.

// That's why they work differently in different environments:
// - Browser: has DOM, window, document
// - Node.js: has fs, http, process (no DOM!)
// - Deno: has Deno.readFile (different APIs)

typeof window;   // "object" in browser, "undefined" in Node
typeof document; // "object" in browser, "undefined" in Node

How they work with the event loop:

1. JS calls a Web API (e.g., setTimeout)

2. Browser handles it on a separate thread

3. When done, browser puts callback in the task queue

4. Event loop picks it up when the stack is empty

Timer APIs

Schedule code to run later.

// setTimeout — run once after delay:
const id = setTimeout(() => {
  console.log("After 1 second");
}, 1000);
clearTimeout(id); // cancel before it fires

// setInterval — run repeatedly:
let count = 0;
const intervalId = setInterval(() => {
  count++;
  console.log(`Tick ${count}`);
  if (count >= 5) clearInterval(intervalId);
}, 1000);

// requestAnimationFrame — sync with display refresh:
function animate(timestamp) {
  // Update animation state
  element.style.transform = `translateX(${x}px)`;
  
  // Schedule next frame (~60fps)
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

// requestIdleCallback — run when browser is idle:
requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0) {
    doLowPriorityWork();
  }
});

Observer APIs

Watch for changes without polling.

// IntersectionObserver — watch element visibility:
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      // Lazy load images, trigger animations, etc.
    }
  });
}, { threshold: 0.5 }); // 50% visible

observer.observe(document.querySelector(".card"));

// MutationObserver — watch DOM changes:
const mutation = new MutationObserver((mutations) => {
  mutations.forEach(m => {
    console.log("DOM changed:", m.type);
  });
});
mutation.observe(element, {
  childList: true,  // watch child additions/removals
  attributes: true, // watch attribute changes
  subtree: true     // watch all descendants
});

Observers are event-driven — much more efficient than polling with setInterval. The browser notifies you when something changes.

1 / 2

Communication APIs

Send and receive data.

// fetch — HTTP requests:
const response = await fetch("/api/users");
const data = await response.json();

// WebSocket — real-time bidirectional:
const ws = new WebSocket("wss://chat.example.com");
ws.onopen = () => ws.send("Hello!");
ws.onmessage = (event) => console.log(event.data);
ws.onclose = () => console.log("Disconnected");

// Server-Sent Events — one-way streaming:
const source = new EventSource("/api/stream");
source.onmessage = (event) => {
  console.log("New data:", event.data);
};

// BroadcastChannel — communicate between tabs:
const channel = new BroadcastChannel("app");
channel.postMessage({ type: "logout" }); // send to all tabs
channel.onmessage = (event) => {
  if (event.data.type === "logout") redirectToLogin();
};

// postMessage — communicate with iframes/workers:
iframe.contentWindow.postMessage(data, "https://trusted.com");
window.addEventListener("message", (event) => {
  if (event.origin !== "https://trusted.com") return; // security!
  handleMessage(event.data);
});

Utility APIs

Other commonly used browser APIs.

// Clipboard API:
await navigator.clipboard.writeText("Copied!");
const text = await navigator.clipboard.readText();

// Geolocation:
navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
  (err) => console.error(err.message)
);

// URL API:
const url = new URL("https://example.com/path?q=hello&page=2");
url.searchParams.get("q");    // "hello"
url.searchParams.set("page", "3");
url.pathname;                  // "/path"

// AbortController — cancel async operations:
const controller = new AbortController();
fetch("/api", { signal: controller.signal });
controller.abort(); // cancel the fetch!

// structuredClone — deep copy:
const deep = structuredClone({ nested: { data: [1, 2, 3] } });

// crypto — random values and hashing:
const uuid = crypto.randomUUID();
const array = crypto.getRandomValues(new Uint8Array(16));

FAQ

Common questions about web apis.

// JavaScript (the language) has: // - Variables, functions, objects, arrays // - Promises, async/await // - Math, Date, JSON, RegExp // Web APIs (provided by the browser) have: // - DOM manipulation (document.querySelector) // - Timers (setTimeout, setInterval) // - Network (fetch, XMLHttpRequest) // - Storage (localStorage, sessionStorage) // - Geolocation, Canvas, Audio, WebSocket... // These are NOT part of JavaScript itself! // They're C++ code in the browser, exposed to JS. // That's why they work differently in different environments: // - Browser: has DOM, window, document // - Node.js: has fs, http, process (no DOM!) // - Deno: has Deno.readFile (different APIs) typeof window; // "object" in browser, "undefined" in Node typeof document; // "object" in browser, "undefined" in Node

// setTimeout — run once after delay: const id = setTimeout(() => { console.log("After 1 second"); }, 1000); clearTimeout(id); // cancel before it fires // setInterval — run repeatedly: let count = 0; const intervalId = setInterval(() => { count++; console.log(`Tick ${count}`); if (count >= 5) clearInterval(intervalId); }, 1000); // requestAnimationFrame — sync with display refresh: function animate(timestamp) { // Update animation state element.style.transform = `translateX(${x}px)`; // Schedule next frame (~60fps) requestAnimationFrame(animate); } requestAnimationFrame(animate); // requestIdleCallback — run when browser is idle: requestIdleCallback((deadline) => { while (deadline.timeRemaining() > 0) { doLowPriorityWork(); } });

// IntersectionObserver — watch element visibility: const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("visible"); // Lazy load images, trigger animations, etc. } }); }, { threshold: 0.5 }); // 50% visible observer.observe(document.querySelector(".card")); // MutationObserver — watch DOM changes: const mutation = new MutationObserver((mutations) => { mutations.forEach(m => { console.log("DOM changed:", m.type); }); }); mutation.observe(element, { childList: true, // watch child additions/removals attributes: true, // watch attribute changes subtree: true // watch all descendants });

// fetch — HTTP requests: const response = await fetch("/api/users"); const data = await response.json(); // WebSocket — real-time bidirectional: const ws = new WebSocket("wss://chat.example.com"); ws.onopen = () => ws.send("Hello!"); ws.onmessage = (event) => console.log(event.data); ws.onclose = () => console.log("Disconnected"); // Server-Sent Events — one-way streaming: const source = new EventSource("/api/stream"); source.onmessage = (event) => { console.log("New data:", event.data); }; // BroadcastChannel — communicate between tabs: const channel = new BroadcastChannel("app"); channel.postMessage({ type: "logout" }); // send to all tabs channel.onmessage = (event) => { if (event.data.type === "logout") redirectToLogin(); }; // postMessage — communicate with iframes/workers: iframe.contentWindow.postMessage(data, "https://trusted.com"); window.addEventListener("message", (event) => { if (event.origin !== "https://trusted.com") return; // security! handleMessage(event.data); });

// Clipboard API: await navigator.clipboard.writeText("Copied!"); const text = await navigator.clipboard.readText(); // Geolocation: navigator.geolocation.getCurrentPosition( (pos) => console.log(pos.coords.latitude, pos.coords.longitude), (err) => console.error(err.message) ); // URL API: const url = new URL("https://example.com/path?q=hello&page=2"); url.searchParams.get("q"); // "hello" url.searchParams.set("page", "3"); url.pathname; // "/path" // AbortController — cancel async operations: const controller = new AbortController(); fetch("/api", { signal: controller.signal }); controller.abort(); // cancel the fetch! // structuredClone — deep copy: const deep = structuredClone({ nested: { data: [1, 2, 3] } }); // crypto — random values and hashing: const uuid = crypto.randomUUID(); const array = crypto.getRandomValues(new Uint8Array(16));

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What Are Web APIs

Timer APIs

Observer APIs

Communication APIs

Utility APIs

FAQ

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

What Are Web APIs

Timer APIs

Observer APIs

Communication APIs

Utility APIs

FAQ