URL and URLSearchParams

## What the URL constructor is `URL` is a platform class that parses a URL string into a structured, mutable object. It implements the WHATWG URL parser — the same algorithm the browser uses for links and for the `fetch` request URL — so it is the ground truth for what a string means as a URL, far more reliable than a regex or `split('?')`. The constructor has two parameters: `new URL(input, base)`. `input` is the URL or relative reference you want to parse; `base` is optional and is itself parsed as an absolute URL first. ## How the base argument resolves a relative reference If `input` parses as an absolute URL on its own — it has a scheme like `https:` — the base is ignored entirely. Otherwise `input` is a *relative reference* and the parser fills in the missing pieces from the base: ```js const base = 'https://shop.example.com/cart/items?a=1#frag'; new URL('https://other.test/x', base).href; // 'https://other.test/x' (base ignored) new URL('/checkout', base).href; // 'https://shop.example.com/checkout' new URL('checkout', base).href; // 'https://shop.example.com/cart/checkout' new URL('../checkout', base).href; // 'https://shop.example.com/checkout' new URL('?b=2', base).href; // 'https://shop.example.com/cart/items?b=2' new URL('#top', base).href; // 'https://shop.example.com/cart/items?a=1#top' new URL('//cdn.test/x', base).href; // 'https://cdn.test/x' (scheme kept) ``` The two that trip people up are the third and fourth lines. A **bare** relative reference is resolved against the base's *directory*: the last segment of the base path is dropped and replaced. So the base `/cart/items` behaves as the directory `/cart/`, and `'checkout'` lands at `/cart/checkout`. Change the base to `/cart/items/` (trailing slash) and the same input lands at `/cart/items/checkout`. A missing or extra trailing slash on an API base is one of the most common URL-building bugs. ## Why the no-base call throws `'/checkout'` carries no scheme and no host. There is nothing to resolve it against, so the parser fails, and a failed parse in the constructor is a `TypeError` — not `null`, not an empty string: ```js try { new URL('/checkout'); } catch (e) { console.log(e.name); } // 'TypeError' ``` This is deliberate: the constructor never returns a half-parsed object. Any URL instance you hold is guaranteed to be a valid, absolute URL. In page code you almost always have a base available — `location.href` for "relative to the current page" or `document.baseURI` if the document has a `<base>` element — so `new URL(path, location.href)` is the idiomatic way to turn a path into a full URL. ## Reading the parsed parts Once parsed, the object exposes the components as properties. Note which ones include their punctuation: ```js const u = new URL('https://[email protected]:8443/a/b/../c?q=1#top'); u.protocol; // 'https:' (with colon) u.origin; // 'https://shop.example.com:8443' (read-only) u.host; // 'shop.example.com:8443' (with port) u.hostname; // 'shop.example.com' (no port) u.port; // '8443' (a string; '' when the scheme's default port is used) u.pathname; // '/a/c' (dot segments already resolved) u.search; // '?q=1' (leading '?', or '' when empty) u.hash; // '#top' (leading '#', or '' when empty) ``` Parsing also normalises: the scheme and host are lower-cased, a default port (`:443` on `https`) is dropped, and `.`/`..` segments are resolved. `origin` is read-only; every other component is writable, and assigning to one re-serialises `href`. ## Parsing without throwing When the input is untrusted — a value from a form field, a query parameter, a config file — you must handle failure. Three options: wrap the constructor in `try`/`catch`; call `URL.canParse(input, base)`, which returns a boolean and shipped across browsers in 2023; or call the static `URL.parse(input, base)`, which returns a `URL` or `null` instead of throwing and landed in 2024-era browser releases. Feature-detect the newer static methods before relying on them, and keep the `try`/`catch` fallback for older engines. ## Why interviewers ask The alternative to this API is string surgery, and string surgery gets encoding, duplicate `?`, and relative resolution wrong in ways that only show up on production data. Knowing that the constructor throws, that it needs a base for relative input, and that a trailing slash changes where a bare relative reference lands is the difference between a URL helper that works and one that quietly produces `https://api.test/v1checkout`.