Polyfill

A polyfill is a piece of code, usually written in JavaScript, that provides a modern feature to a browser or runtime that does not yet support it natively. It lets developers use new language capabilities while being confident the code will still run on older browsers.

How a polyfill works

A polyfill first checks whether the feature is already available in the environment. If it is, the polyfill does nothing and lets the native, faster implementation run. If the feature is missing, the polyfill adds its own version, filling the gap in the programming interface. This mechanism is called feature detection and ensures the code never needlessly overrides what already works.

• Feature detection — a conditional check for a method or object before defining it.
• API completion — supplying the missing feature in a standards-compliant way.
• Transparency — once loaded, the rest of the app uses the feature as if it were native.

Polyfills in practice

Polyfills are essential wherever cross-browser compatibility matters:

1. New browser APIs — for example, providing an array method or the Promise object in older browsers.
2. Wide-reach applications — stores and portals that must run across many devices and software versions.
3. Pairing with a transpiler — polyfills often work alongside Babel, which translates syntax while the polyfill supplies missing features.

It is best to load only the polyfills you actually need — an excess increases file size and slows the page down. Modern build tools can select the polyfill set automatically based on the declared range of supported browsers.