o7planning

What are polyfills in programming science?

View more Tutorials:

Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

1- Polyfill

In layman’s terms, one can imagine a polyfill as a common paste which can be used to fill holes and cracks to smooth out any defects in a wall. In the UK there is a popular brand name for this paste which is called “Polyfilla”.
For the web, the term "Polyfill" has a similar meaning. A Polyfill is a small piece of code or a missing browser function that needs to be added or filled in.
For easy understanding, take a look at a small ES6 JavaScript code snippet below:

// ES6 Code
var s = 'Tom and Jerry';

if (s.startsWith('Tom')) {
    console.log('Hello Tom');
}
The startsWith method is part of the ES6 specification published in 2015. The code above works perfectly on new browsers, such as Chrome 41+. Note: Chrome version 41 only partially supports ES6 features. It was only when Chrome version 51 (May 2016) was released that ES6 was fully supported by Chrome.
Browser Version Supports startsWith Version Fully Support ES6 Date
Chrome 41 51 May 2016
Edge 12 14 Aug 2016
Firefox 17 54 Jun 2017
Internet Explorer No No  
Safari 9 10 Sep 2016
Opera 28 38 Jun 2016
To support old browsers you must patch functions that are missing. In this case, make sure to check if the browser supports the startsWith method. If it doesn't, you need to simulate it with equivalent feature:

// ES5 Code
if (!String.prototype.startsWith) {
    String.prototype.startsWith = function (searchString, position) {
        position = position || 0;
        return this.substr(position, searchString.length) === searchString;
    };
}
var s = 'Tom and Jerry';

if (s.startsWith('Tom')) {
    console.log('Hello Tom');
}
Another example of a polyfill. The static method Math.trunc(number) is used to "truncate" the decimal part of a number and return an integer. For example Math.trunc(1.23) returns 1. Old browsers do not support the method, therefore we need to simulate this method to add to it.

if (!Math.trunc) { // if no such method
    // implement it
    Math.trunc = function (number) {
        // Math.ceil and Math.floor exist even in ancient JavaScript engines
        // they are covered later in the tutorial
        return number < 0 ? Math.ceil(number) : Math.floor(number);
    };
}
By the time this article is released (2021), we can basically be sure that most users have switched to using a browser that supports JavaScript ES5+. So creating polyfill(s) for "too old" browsers (ES4-) is not really necessary anymore.
caniuse.com is a website that helps you test which browsers support a certain feature. For example, check browser support for the startsWith method

2- Ways to use Polyfill(s)

Basically, there are 2 ways to use Polyfill:
Polyfilling manually
Manually write and use your Polyfill(s) like the examples above.
Polyfill library
Many Polyfill libraries are created by the community and are freely shared. They are often used in conjunction with Transpiler(s).
For example, JavaScript Polyfill libraries like babel-polyfill, Es6-shim, polyfill-library,... can be imported into your projects, such as NodeJS, React,...
A few examples using the Polyfill libraries, which you may be interested in:
  • TODO Link?

View more Tutorials: