Polyfill

Updated September 30, 20262 min read

In short

A polyfill is code that adds a modern web feature to older browsers that lack it, so developers can use the standard API everywhere without special cases.

What is a polyfill?

A polyfill is a piece of code, usually JavaScript, that implements a browser feature for environments that don't support it natively. It first checks whether the feature exists and, only if it is missing, defines it using older features that are available. Code written against the standard API then works the same way in old and new browsers.

A classic polyfill starts with a check such as if (!Array.prototype.includes) and then adds the missing method. Libraries such as core-js provide polyfills for most of the JavaScript standard library, and build tools can insert only the ones your target browsers need, based on a browserslist configuration. Some features, such as new CSS layout modes or low-level browser APIs, can't be fully polyfilled, because they need support deep inside the browser engine.

The name comes from a brand of wall filler: a polyfill fills the cracks in a browser's feature support so the surface looks smooth. Now that all major browsers update automatically, polyfills matter less than they did in the Internet Explorer era, but they are still used for older devices, embedded browsers, and very new APIs. Polyfills that modern browsers don't need still add bytes and slow pages down, so it pays to target them carefully.

A polyfill is often confused with a transpiler. A transpiler such as Babel or the TypeScript compiler rewrites new syntax, like optional chaining (?.) or classes, into older syntax, because syntax can't be added at runtime. A polyfill adds missing functions and objects, such as Promise, fetch, or Array.prototype.at, while the code runs. Many projects need both, and a close cousin, the ponyfill, provides the same feature as a separate function without modifying global objects.

Key takeaways

A polyfill implements a missing web feature using features the browser already has.
It detects the feature first and only fills it in when it is absent.
Transpilers rewrite new syntax; polyfills add missing functions and objects at runtime.
Build tools can include only the polyfills your target browsers actually need.
Unneeded polyfills add weight, and polyfill scripts loaded from third parties are a supply-chain risk.

Example

Polyfilling Array.prototype.at()javascript

// Add Array.prototype.at() only if the browser lacks it
if (!Array.prototype.at) {
  Object.defineProperty(Array.prototype, "at", {
    value: function (index) {
      const i = Math.trunc(index) || 0;
      return this[i < 0 ? this.length + i : i];
    },
    writable: true,
    configurable: true,
  });
}

// Code can now use the standard API everywhere
console.log([10, 20, 30].at(-1)); // 30

Readers ask

What is the difference between a polyfill and a transpiler?

A transpiler converts new syntax into older syntax before the code runs, for example turning a?.b into explicit checks. A polyfill adds missing built-in functions or objects at runtime, such as Promise or structuredClone.

Do I still need polyfills today?

Often very few. Evergreen browsers support nearly all of modern JavaScript, so many projects need polyfills only for the newest APIs or for older devices they must support, which a browserslist query based on your real audience can tell you.

Is it safe to load polyfills from a CDN?

It carries risk. In 2024 a widely used polyfill domain changed owners and began serving malicious code to the many sites that loaded scripts from it, so bundling or self-hosting polyfills is the safer choice.