The Web Dev Guide by Wishtack
  • The Web Dev Guide by Wishtack
  • HTML
    • HTML Tags
    • HTML Attributes
    • Content Formatting
    • Empty Tags vs Content Tags
    • Some Links
  • ECMAScript
    • Some History
    • Language Properties
    • Single-Threaded thus Asynchronous
    • The Event Loop
    • Classes
    • Hoisting is Dead: var vs. let vs. const
    • this & "binding"
    • Arrow Functions
    • Template Strings
    • Syntactic Sugar
      • Spread
      • Destructuring
      • Rest
      • Object Literal Property Value Shorthand
    • Named Parameters
    • Compatibility
  • Tools
    • Node.js
    • NPM
    • Yarn
    • Webpack
    • WebStorm
    • StackBlitz
  • DOM
    • What Is It?
    • Element Selection
    • Element Modification
    • Events
  • Forms
    • The <form> tag
    • Form elements
    • Form validation
  • Networking
    • Fetch Web API
  • CSS
    • Selectors
    • Transforms
    • Transitions
    • Animations
    • Web Animations API
    • Sass
  • Responsive Web Design
    • Viewport
    • Media Queries
    • Grid Layout
    • Flex Layout
    • Frameworks & Libraries
  • Web APIs
  • Testing
    • Unit Testing
    • End to End Testing
  • Security
    • Injection
    • DOM XSS
    • Insecure Direct Object Reference
    • Cross-Site Request Forgery
    • Client vs API Validation
    • API Unauthorized Access and Data Leak
  • More Links
Powered by GitBook
On this page
  • Transpilation
  • Polyfills
  1. ECMAScript

Compatibility

PreviousNamed ParametersNextTools

Last updated 6 years ago

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

Transpilation

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

We need a transpiler:

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:

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

Babel: ​

TypeScript: ​

One of the most famous polyfill libraries is core-js .

Or you can use a polyfill service like .

https://babeljs.io/
https://www.typescriptlang.org/
https://github.com/zloirock/core-js
https://polyfill.io
https://kangax.github.io/compat-table/es6/
ECMAScript 6 compatibility table
Logo