Polyfills and Transpilers

JavaScript keeps evolving. Regularly, new language proposals are submitted, analyzed, and added to https://tc39.github.io/ecma262/ and then incorporated into the specification. There may be differences in how it is implemented in JavaScript engines depending on the browser. Some may implement the draft proposals, while others wait until the whole specification is released. Backward compatibility issues arise as new things are introduced.

The modern code in old browsers is supported using these tools: transpilers and polyfills

Transpilers

Now, it’s the transpiler’s job to make the nullish coalescing operator” ?? understandable to the old browsers.

// before running the transpiler
height = height ?? 200;
// after running the transpiler
height = (height !== undefined && height !== null) ? height: 200;

Babel is one of the most prominent transpilers. In the development process, we can use build tools like webpack or parcel to transpile code.

Polyfills

There are times when new functionality isn’t available in outdated browser engines. In this case, the code that uses the new functionality won’t work. To fill the gaps, we add the missing functionality which is called a “polyfill”. For example, the filter() method was introduced in ES5 and is not supported in some of the old browsers. This method accepts a function and returns an array containing only the values of the original array for which the function returns true

const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter((e) => e % 2 === 0); // filter outs the even number
console.log(filtered);
// [2, 4, 6]

Note: To learn more about JavaScript visit https://github.com/sumn2u/learn-javascript.

The polyfill for the filter can be written as follows:

Array.prototype.filter = function (callback) {
  // Store the new array
  const result = [];
  for (let i = 0; i < this.length; i++) {
  // call the callback with the current element, index, and context.
  //if it passes the text then add the element in the new array.
    if (callback(this[i], i, this)) {
      result.push(this[i]);
    }
  }
  //return the array
  return result
}

Caniuse shows the updated functionality and syntax supported by different browser engines.