Web APIs vs the JavaScript Language

When you write document.querySelector() or fetch(), you are using JavaScript. But those two things are not part of the JavaScript language. They are Web APIs: features the browser provides, and that your JavaScript can call.

Two layers

1
2
3
4
5
6
7
8

// Language: works anywhere JavaScript runs
const numbers = [3, 1, 2].sort();
console.log(numbers);            // → [1, 2, 3]

// Web API: provided by the browser
console.log(typeof document);    // → object
console.log(typeof fetch);       // → function
console.log(typeof localStorage);// → object

Why the difference matters

• Environment: Node.js runs the language but has no document. So code that uses the DOM fails there with document is not defined.
• Support: language features depend on the engine version; Web APIs depend on the browser and its permissions.
• Where to look things up: MDN documents both, in sections called JavaScript and Web APIs.
• Security: Web APIs are what let code touch the outside world, so browsers guard them with permissions, same-origin rules and user gestures.

Examples of Web APIs

Many APIs are asynchronous

Most use events, callbacks or promises, because they involve waiting (a network reply, a user permission).

Permissions and user gestures

Sensitive APIs, such as clipboard reads, notifications and geolocation, need the user’s permission, and often a recent user action (a click). Browsers also require HTTPS (a “secure context”) for many of them.

Feature detection

Support varies, so check before you use something:

1
2
3
4
5
6

if ("IntersectionObserver" in window) {
  console.log("IntersectionObserver is available");
}
if (typeof navigator.clipboard === "object") {
  console.log("Clipboard API object exists");
}

The rest of this chapter

You will meet the Web APIs that are useful on real websites: URL and URLSearchParams, the History API, the Clipboard API, the three observers, notifications and Web Workers. The DOM and fetch have chapters of their own.