JavaScript Polyfills and Transpilers
Tags: javascript, codenewbie, tutorial, webdev
Published: 2021-02-04 21:55:52

{% youtube DtkxQ9PPZ98 %}

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

Also, approved proposals move to ECMAScript [specification](http://www.ecma-international.org/publications/standards/Ecma-262.htm) 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](https://github.com/tc39/ecma262). 

<!-- https://tc39.github.io/ecma262/ -->

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

Check out the [Kangax GitHub compatible table](https://kangax.github.io/compat-table/es6/).

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:

1. Transpilers
2. Polyfills

---
<a href="https://www.whogohost.com/host/aff.php?aff=7390&page=hosting" target="_blank"><img src="https://www.whogohost.com/images/affiliates/unlimited-hosting-728-x-90.png" /></a>

---
### 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:

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

Analyzed code above by a transpiler will look like:

```js
// 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](https://babeljs.io/) 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](http://webpack.github.io/) 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:

```js
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.

```js
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](https://github.com/zloirock/core-js), [polyfill.io](http://polyfill.io/) to do the conversion automatically.

{% youtube B0B7dfiUd-Y %}

**Happy coding!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---

### TechStack | Domain
- Purchase a `.com` domain name as low as $9.99.
- Purchase a `.net` domain name as low as $12.99.
- Get cheaper domain names as low as $3.
-  Build a website with ease.

<a href="https://domain.mno8.net/c/2653712/848391/9560" target="_top" id="848391"><img src="//a.impactradius-go.com/display-ad/9560-848391" border="0" alt="" width="300" height="250"/></a><img height="0" width="0" src="https://imp.pxf.io/i/2653712/848391/9560" style="position:absolute;visibility:hidden;" border="0" />