Test ES6 Support in Browsers

Published: 2017-11-12
Updated: 2017-12-17
Web: http://fritzthecat-blog.blogspot.com/2017/11/es6-support-in-browsers.html

So we got a new programming language that builds on bad old JavaScript! It is called EcmaScript, and I wrote about it more than a year ago in this Blog. Most future web browsers already support it. Current version is 6, so it's called ES6, alias ES2015 (the year of specification, ES5 was in 2009). Any JS code is valid ES6 code, but not any ES6 code is valid JS code.

We will have to learn to read ES6, because it definitely is more complex than JS. Thus I am going to write several articles about the available ES6 features.

This Blog is about how to find out, in a web page, whether the displaying browser supports ES6. Mind that the free Babel JS library can teach old browsers to interpret ES6 (although free, it may be a little expensive:-).

Test for ES6

There is a web page that recommends how you can test the browser's ES6 capability via traditional JavaScript:

• https://gist.github.com/bendc/d7f3dbc83d0f65ca0433caf90378cd95

Here you can see what new Function("(a = 0) => a") says about your browser:

HTML

  <h4>Is ES6 fully supported by this browser?</h4>
  <h4 id="supportsES6">(Here should be "Yes" or "No"!)</h4>
  <p id="error"></p>

JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<script>

  (function() {
    var error;

    /* From https://gist.github.com/bendc/d7f3dbc83d0f65ca0433caf90378cd95 */
    var supportsES6 = (function() {
      try {
        new Function("(a = 0) => a");
        return true;
      }
      catch (e) {
        error = e;
        return false;
      }
    }());
    
    var color = supportsES6 ? "Green" : "Red";
    var label = supportsES6 ? "Yes!" : "No!";
    var messageText = supportsES6 ? "" : error;

    var indicator = document.getElementById("supportsES6");
    indicator.style.color = color;
    indicator.innerHTML = label;
        
    var message = document.getElementById("error");
    message.innerHTML = messageText;
  }());
  
</script>

The Thing with the Semicolon

Here comes a small foretaste of ES6 features. (If you have problems reading that source, don't care, I will explain it in my next Blog.)

You remember that ES6 discourages the use of semicolons as statement separator?

I could say now that no browser at all already supports ES6. Look at following script. You can find it among the "Destructuring Assignment" examples on the ES6 feature-page. This failed on all browsers I tried (Chrome, Firefox, Opera).

   var toggleVariableValues = function() {
     let [ a, b ] = [ 1, 2 ] /* error when no semicolon here! */
     [ b, a ] = [ a, b ]
     if (a !== 2 || b !== 1)
       throw "Toggling variable values failed!"
   };

Try it out here (maybe it's already fixed?):

The specification says following:

Certain ECMAScript statements (empty statement, let, const, import, and export declarations, variable statement, expression statement, debugger statement, continue statement, break statement, return statement, and throw statement) must be terminated with semicolons.
....
For convenience, however, such semicolons may be omitted from the source text in certain situations.
....

I don't believe that I'm the only one with semicolon problems. I plead for always setting a semicolon, in JS and also in ES6. Or do we want to study when to set and when not?

ɔ⃝ Fritz Ritzberger, 2017-11-12