What are JavaScript polyfills for?

TL;DR

Polyfills in JavaScript are pieces of code that provide modern functionality to older browsers that lack native support for those features. They bridge the gap between the JavaScript language features and APIs available in modern browsers and the limited capabilities of older browser versions.

They can be implemented manually or included through libraries and are often used in conjunction with feature detection.

Common use cases include:

• New JavaScript Methods: For example, Array.prototype.includes(), Object.assign(), etc.
• New APIs: Such as fetch(), Promise, IntersectionObserver, etc. Modern browsers support these now but for a long time they have to be polyfilled.

Libraries and services for polyfills:

• core-js: A modular standard library for JavaScript which includes polyfills for a wide range of ECMAScript features.

  import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.
  
  [1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]

• Polyfill.io: A service that provides polyfills based on the features and user agents specified in the request.

  <script src="https://polyfill.io/v3/polyfill.min.js"></script>

Polyfills in JavaScript

Polyfills in JavaScript are pieces of code (usually JavaScript) that provide modern functionality on older browsers that do not natively support it. They enable developers to use newer features of the language and APIs while maintaining compatibility with older environments.

How polyfills work

Polyfills detect if a feature or API is missing in a browser and provide a custom implementation of that feature using existing JavaScript capabilities. This allows developers to write code using the latest JavaScript features and APIs without worrying about browser compatibility issues.

For example, let's consider the Array.prototype.includes() method, which determines if an array includes a specific element. This method is not supported in older browsers like Internet Explorer 11. To address this, we can use a polyfill:

// Polyfill for Array.prototype.includes()
if (!Array.prototype.includes) {
  Array.prototype.includes = function (searchElement) {
    for (var i = 0; i < this.length; i++) {
      if (this[i] === searchElement) {
        return true;
      }
    }

    return false;
  };
}

By including this polyfill, we can safely use Array.prototype.includes() even in browsers that don't support it natively.

Implementing polyfills

1. Identify the missing feature: Determine if the feature is compatible with the target browsers or detect its presence using feature detection methods like typeof, in, or window.
2. Write the fallback implementation: Develop the fallback implementation that provides similar functionality, either using a pre-existing polyfill library or pure JavaScript code.
3. Test the polyfill: Thoroughly test the polyfill to ensure it functions as intended across different contexts and browsers.
4. Implement the polyfill: Enclose the code that uses the missing feature in an if statement that checks for feature support. If not supported, run the polyfill code instead.

Considerations

• Selective loading: Polyfills should only be loaded for browsers that need them to optimize performance.
• Feature detection: Perform feature detection before applying a polyfill to avoid overwriting native implementations or applying unnecessary polyfills.
• Size and performance: Polyfills can increase the JavaScript bundle size, so minification and compression techniques should be used to mitigate this impact.
• Existing libraries: Consider using existing libraries and tools that offer comprehensive polyfill solutions for multiple features, handling feature detection, conditional loading, and fallbacks efficiently

Libraries and services for polyfills

• core-js: A modular standard library for JavaScript which includes polyfills for a wide range of ECMAScript features.

  import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.
  
  [1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]

• Polyfill.io: A service that provides polyfills based on the features and user agents specified in the request.

  <script src="https://polyfill.io/v3/polyfill.min.js"></script>

Further reading

• Polyfill - MDN
• Polyfills and transpilers
• Polyfills: How do they work?
• Polyfill in Javascript
• Shubham Dutta