Is Ecmascript 6 supported by current browsers?

Question

Can Ecmascript 6 features available in Javascript already be used in a way that is supported by current browsers? I wonder if this version is already supported as a whole (and not just specific features of it).

Answer 1

When I want to know if I can use this or that feature and which browsers support and which versions of browsers support I usually use the site https://caniuse.com, for example the Ecmascript6 you spoke of:

Link with details: https://caniuse.com/#search=es6

Answer 2

Browser Support

The Ecmascript 3 is totally supported in all browsers.

The Ecmascript 5 (2009) is totally supported in all modern browsers . Observing: The Internet Explorer 9 does not support Ecmascript 5 "use strict".

The Ecmascript 6 (Ecmascript 2015) is totally supported in all modern browsers except Internet Explorer.

The Ecmascript 7 (Ecmascript 2016) is supported only in Chrome and Opera.

NOTE: Always observe the browser versions and which methods sane compatible in the even.

W3SCHOOLS - SOURCE

But now what? How do I make my life easier and write a code in whatever version of ecmascript and have compatibility in most browsers and their respective versions?

Calm down, as the Chapolin: "Calma, não criemos panico.."

There are several compilers/transpilators and Open source Javascript bundlers. Below I will quote two (2) of them and their introduction.

Webpack

In its essence, the Webpack is a Static module packer for modern Javascript applications. When the webpack processes your application, it creates internally a dependency chart that maps all modules your project needs and generates one or more configurable packages.

WEBPACK - SOURCE

Babel

Is a toolchain which is mainly used for converter o código Ecmascript 2015+ in a version compatible with previous versions of Javascript in current and old browsers or environments.

BABEL - SOURCE

TIP:

Use the Webpack, because with it you can create a configuration for all your bundlers and packaging, including you can use Babel with it.

Answer 3

Yes, Ecmascript 6 is already being supported on browsers current.

In this context, we have defined browsers as the latest versions of Chrome, Firefox, Safari, Edge, Opera, etc..

But before using a specific feature, check its compatibility to make sure your project’s target audience is covered by current support.

You can use websites as the Ecmascript Compatibility Table and the Can I Use to check support by Features specific to each version.

Answer 4

If you want, you can write your code using the features of Ecmascript 6 and still support old browsers using the Babel. It will transform your Javascript code in a way that the older browsers you want to understand.

You can test it online at this link. When opening, it will be marked with the preset es2015 by default.

Now enter the code below:

function Teste() {
    let a = Math.floor(Math.random() * 10) + 1  ;

    if (a < 5) {
        return () => {
            console.log('A < 5');
        }
    } else {
        return () => {
            console.log('A >= 5');
        }
    }
}

This code uses keyword let and the Arrow functions.

On the right side, it will transform the code to:

"use strict";

function Teste() {
  var a = Math.floor(Math.random() * 10) + 1;

  if (a < 5) {
    return function () {
      console.log('A < 5');
    };
  } else {
    return function () {
      console.log('A >= 5');
    };
  }
}

As you can see, he transformed the let in var and replaced the Arrow functions with a normal function statement.

Now uncheck the preset es2015 and enable the ENV preset. On the field Browsers, place Firefox > 50 (that is, you’re telling him to transform his code in a way that Firefox versions greater than 50 can interpret).

You will notice that the code remains identical as versions of Firefox over 50 support both the let how much Arrow functions.

Switch now to Firefox > 44. It will transform the let in var, but will keep Arrow functions. This is because there is at least one version of Firefox higher than 44 that did not yet support let.

I recommend researching to further deepen and integrate Babel to build your application. With it, you can use the latest features of the Ecmascript specification while still supporting older browsers.