10

I would like to start writing code using the up and coming ECMAScript 6 (ES6) so as to start getting to grips with the new syntax.

Is there some kind of web resource or browser plugin that I can use to play (write and test code) on what we currently have in regards to ES6?

I was lead to believe that using Google Chrome Canary might be able to help. So I downloaded Canary, I enabled a couple of features in Canary:

Enable Experimental JavaScript (Mac, Windows, Linux, Chrome OS, Android)

Enable web pages to use experimental JavaScript features.
#enable-javascript-harmony Enable

And after testing the let block scope in a for loop

for (let i = 0; i < 10; i++) {
   console.log(i);
}

I got a syntax error:

SyntaxError: Unexpected identifier

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Aaron
  • 3,195
  • 5
  • 31
  • 49
  • 1
    There's Traceur but it's buggy as hell. – nullpotent Oct 03 '14 at 11:09
  • I've heard you need to use strict mode for ES6 to work in Chrome Canary – Bergi Oct 03 '14 at 11:11
  • 1
    @iccthedral Really? I'm using Traceur right now with a lot of success. I wouldn't categorize it that way. The ES6 standard hasn't been ratified yet, so there are some things that may not be final, and Traceur doesn't support ALL the ES6 things, but for what it does support, I've had a really good experience so far. What kinds of problems have you run into? – Brian Genisio Oct 07 '14 at 02:29
  • I've just come across this question I asked obver a year ago. I would recommend Babel for anyone who needs a transpiler. – Aaron Dec 16 '15 at 09:35

3 Answers3

4

The following works in Chrome 37 (current Chrome) with the Experimental JavaScript flag enabled:

(function () {
   "use strict"; 
   for (let i = 0; i < 10; i++) {
      console.log(i);
   }
})()

Outside strict mode, you should see SyntaxError: Illegal let declaration outside extended mode or SyntaxError: Unexpected identifier if you're not in strict mode, or possibly SyntaxError: Unexpected strict mode reserved word if the Experimental JavaScript flag is not enabled.

You can also compile your code with with Babel or with Traceur and the --block-binding flag enabled.

See kangax's ES6 compatibility table for more.

lyschoening
  • 18,170
  • 11
  • 44
  • 54
  • Using Version 40.0.2179.0 canary (64-bit) I was getting "SyntaxError: Unexpected identifier" However after including "use strict" the loop ran. I thought "use strict" was for ES5. Thanks – Aaron Oct 06 '14 at 08:05
  • I was wrong about the error message—it is probably actually an old one that was [scrapped](http://stackoverflow.com/questions/17253509/what-is-extended-mode) and you're seeing the new one. I've updated the answer to reflect that. – lyschoening Oct 06 '14 at 09:38
3

Here is a list of some transpilers from ES6 to ES5:

https://github.com/sindresorhus/grunt-es6-transpiler

https://github.com/sindresorhus/broccoli-es6-transpiler

https://github.com/sindresorhus/gulp-es6-transpiler

https://github.com/termi/es6-transpiler

https://github.com/google/traceur-compiler

user3995789
  • 3,452
  • 1
  • 19
  • 35
1

Babel has a tool to test transpile and execute code. Just use it to test and in webapps it will very probable that you will use it to transpile to production code!!

http://babeljs.io/repl

Babel tranpiler

molavec
  • 8,848
  • 1
  • 27
  • 22