Polyfills vs Transpilers — How New JS Runs in Old Browsers

A tidy interview question with a tidy answer: transpilers rewrite SYNTAX; polyfills add missing FUNCTIONS.

Transpiling (Babel/esbuild)

// you write:
const greet = (name = "friend") => `Hi ${name}`;

// old-browser output:
var greet = function (name) {
  if (name === undefined) name = "friend";
  return "Hi " + name;
};

Arrow functions, classes, ?. — syntax an old parser would choke on gets rewritten at build time.

Polyfilling

// Array.prototype.at is a FUNCTION, not syntax — patch it at runtime:
if (!Array.prototype.at) {
  Array.prototype.at = function (i) {
    return this[i < 0 ? this.length + i : i];
  };
}

fetch, Promise, IntersectionObserver in ancient browsers — all polyfills. This is also the practical use of prototypes (see that guide).

The 2026 reality

• Browserslist in package.json tells your bundler what to support; it transpiles/polyfills accordingly
• Evergreen browsers made heavy transpiling rarer — many teams ship es2020+ untouched
• Runtime feature detection still matters for cutting-edge APIs: if ("share" in navigator)

Check any feature's support at caniuse.com — the tab every frontend dev keeps open.