JavaScript Polyfills and Transpilers

#javascript #codenewbie #tutorial #webdev

New features are added to JavaScript yearly through approved proposals before integrating them into the browsers' engine.

Also, approved proposals move to ECMAScript specification document every year (the reason why we have ECMA 2015 to the current year, ECMA N).

If you are interested to see approved proposals go to the ECMA262 GitHub repository.

JavaScript engine teams implement proposals based on how interesting and easy the code seems to be.

Check out the Kangax GitHub compatible table.

It is advisable to use the most recent modern code.

We will see how to allow modern code (next-gen JavaScript) to work on older engines.

There are two types of tools needed to compile modern code to older code for unsupported browsers' engines:

Transpilers
Polyfills

Transpilers

A transpiler is the software that can parse modern code to older syntax constructs so that the result would be the same.

For example, the modern code (ECMAScript2020) nullish coalescing operation is:

// before running the transpiler
let height;
height = height ?? 45; // 45

Analyzed code above by a transpiler will look like:

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

A good piece of advice is to use transpiler tools like Babel even though your browser supports the latest modern code because other people visiting your site might be using an old engine.

A more fun tool to use is webpack to run transpiler automatically on every code change - easy integration into the development process.

Polyfills

A script that updates or adds new functions is called polyfill.

Programmers provide alternatives to their code in case the new function used is not supported by older engines.

For example, built-in functions like Math.floor(num) gets updated to Math.trunc(num) in older engines by the code construct below:

if (!Math.trunc) { 
  Math.trunc = function(number) {

    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
}

console.log(Math.trunc(3.5)); // 3

Math.ceil round-up decimal numbers to a whole number, while Math.floor round-down decimal numbers to a whole number.

In the example above, Math.trunc behaves like Math.ceil for negative decimal numbers in older JavaScript engines that don't support Math.trunc feature.

Math.trunc(-4.5); // -4
Math.ceil(-4.5); // -4

Math.trunc(5.4); // 5
Math.floor(5.4); // 5

The good news is you can worry less about writing code like the one above by using libraries like corejs, polyfill.io to do the conversion automatically.