Photo by Matthew Henry

Daddy, what’s a Polyfill?

With the advent of js native, and the multiplication of browsers and environments (mobile, desktop, tablet), we hear more and more in our open-spaces:

“You would not know a polyfill?”

But who is this polyfill?

Definition :

A polyfill is simple. It is a set of functions to simulate, on an old web browser, features that are not natively available. (Cf: Wikipedia)

Clearly, it’s like back then with double CSS, one specially for IE and one for the rest. Today browsers do not implement at the same speed the new features available by native javascript. We must then use a polyfill for it to be available everywhere.

And here I hear you say to me:

“But is not that what Jquery is already doing?”

So no, that’s not exactly what Jquery is doing. Indeed, the latter is an overlay that allows to use the same functions js on all browsers, but it is not a polyfill, because it renames the functions and does not directly use the native function.

Again, you will say to me:

“But what is polyfill?”

It’s simple. Let’s take the native function javascript “fetch”, which allows to call urls in XHR. If you go to the Can I Use ? Site, you will see that you can not use this function on IOS 10. Then you can use the “ajax” function of Jquery but in exchange you loaded the whole of Jquery and don’t use the power of your browser. This is where you need the polyfill “fetch” available here https://github.com/github/fetch. Simply import it and then the “fetch” function will be available for all browsers, even IOS 10.

And now I hear you again:

“I do not find my polyfill, so how do I develop it?”

How to implement a polyfill?

We will make it simple, today we want to use the function Object.assign() to create a new object js.

If you go to Can I Use you can find the following page:

As you can see, the function is not implemented on IE11. So we’ll do the polyfill ourselves.
It is sufficient to first check the existence of the function:

if (typeof Object.assign != 'function') {
  //The function doesn't exist
}

If it does not exist then it’s overloaded with our polyfill, and in js it is enough to define the function:

if (typeof Object.assign != 'function') {
  Object.assign = function (target, varArgs) { 
    'use strict';
    // TODO
  };
}

And now we are developing:

if (typeof Object.assign != 'function') {
  Object.assign = function (target, varArgs) { 
    'use strict';
    if (target == null) { // TypeError if undefined or null
      throw new TypeError('Cannot convert undefined or null to object');
    }
    var to = Object(target);
    for (var index = 1; index < arguments.length; index++) {
      var nextSource = arguments[index];
      if (nextSource != null) { // Skip over if undefined or null
        for (var nextKey in nextSource) {
          // Avoid bugs when hasOwnProperty is shadowed
          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
    }
    return to;
  };
}

There you go! You have a polyfill!

There should be a polyfill for everything so before implementing it, go to Google.