Polyfill

A polyfill is a piece of code that provides modern functionality in environments where that functionality is not natively available. In web development and JavaScript, a polyfill detects the absence of a feature and defines an implementation that mimics the standard API, allowing developers to write code for newer platforms while still supporting older ones.

How polyfills work: they typically run early, performing feature detection. If the feature is missing, the polyfill defines the necessary functions, objects, or prototypes on the global scope. If the environment already supports the feature, the polyfill remains inert and does not alter native behavior.

Common examples include polyfills for ES5 and later features such as Object.create, Array.prototype.forEach, ES6 promises, fetch, and Object.assign. More broadly, polyfills enable APIs like the Fetch API or the URL API to be used in older browsers. Some projects also provide CSS polyfills for newer layout or styling features.

Variants and terminology: a polyfill that modifies the global environment is sometimes called a shim, though terminology varies. A ponyfill is a related concept that does not modify the global scope; instead it exports a function or object that can be imported and used without affecting global objects.

Limitations and considerations: polyfills cannot replicate all native behavior perfectly in every edge case, and they can add extra script size and runtime overhead. They may rely on other APIs and can interfere with optimizations or security policies if not used carefully. When possible, polyfills are used in combination with progressive enhancement strategies and modern build tooling.

History: the term polyfill originated in the late 2000s (notably in a Remy Sharp discussion) as a means to describe code that “fills in the gaps” for older environments. It has since become a standard concept in web compatibility.