> For the complete documentation index, see [llms.txt](https://web-dev-guide.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://web-dev-guide.wishtack.io/ecmascript/compatibility.md).

# Compatibility

How can we use the latest ECMAScript features and still be compatible with most browsers?

<https://kangax.github.io/compat-table/es6/>

{% embed url="<https://kangax.github.io/compat-table/es6/>" %}

## Transpilation

ECMAScript 5.1 is for modern ECMAScript what assembly is for C++.

We need a transpiler:

* Babel: <https://babeljs.io/>​
* TypeScript: <https://www.typescriptlang.org/>​

But this will not be enough as transpilers will only convert syntactic features but not new browser APIs and methods.

## Polyfills

We need to compensate the lack of some objects, functions or methods `customElements`, `fetch`, `Array.filter` on some browsers.

In order to fill the gap, we will use polyfill libraries. These libraries detect missing features and compensate them with **JavaScript implementations**.

Example:

```javascript
if (Array.prototype.first == null) {
    Array.prototype.first = function () {
        return this[0];
    };
}
​
const valueList = [1, 2, 3];
​
console.log(valueList.first()); // 1
```

One of the most famous polyfill libraries is core-js <https://github.com/zloirock/core-js>.

Or you can use a polyfill service like <https://polyfill.io>.