ES6 Walkthroughs

We dedicate this site to all the hardworking Web application developers trying to stay ahead of the game in an ever-changing landscape of chaos and fun.

Click a solid lime green box below to try out a new feature in ECMAScript supported by either traceur or natively in your browser which supports ?% of the examples.

Click the or the next to the walkthrough name to view the specification documentation.

Firefox Nightly

At the moment, Firefox Nightly has the best support for ES6 with 75% of the ES6 features implemented. Go get it.

Chrome Canary

The next best recommendation is Chrome Canary with 65% of ES6 features implemented.

Firefox and Chrome

Right behind the bleeding edge options are Firefox Stable at 64% and Chrome Stable at 59% of ES6 features implemented.

IE 11

Not worth your time with only 11% of ES6 features implemented. Maybe IE 12 in Windows 9 10 will have better support.

I recently gave a talk to some fine developers at the Houston TechFest 2014. I did not know that I had time allotted to me to talk and, therefore, had not prepared any material.

When I arrived at the lectern, I looked out over the room and mentioned my unpreparedness. While I plugged in my laptop to the projector, I thought about all the cool stuff I had learned and used recently. When I said that I did not know what to talk about, someone called out "JavaScript"! I asked why I should talk about that; the audience member replied, "Because we're in the JavaScript room!"

Being no stranger to JavaScript, I asked how many people had heard of ECMAscript 6, ECMAscript Harmony, or the like. Only one person raised their hand! I talked about the features in the upcoming version of ES and saw that a lot of the audience appeared interested in the topic. The following week, I started asking some of my coworkers if they knew about ES6 and the cool stuff in it. I found very few that did.

I searched around the World Wide Web to find some tutorials from which my friends and coworkers could learn. I found a few, sprinkled around the Internet, containing some pretty dated material. So, I have tried to bring it all together in one place. I hope you get some use out of it.

Curtis Schlak

I want to thank others that have put together resources that this site uses.

ECMAscript support

kangax maintains the ECMAscript compatibility tables over on GitHub. This site specifically uses the data-es6.js for information about ES6 features and the tests that demonstrate that.
Ace code editor
Used in all of the example pages. Thanks, Ace guys.
For those browsers that do not support some of the ES6 features, traceur allows you to polyfill some of the upcoming functionality. You can see the support in the right-most column.
Used for keybindings on the editor pages.

CSS support

Pure CSS
A lightweight CSS library. Lightweight as in it does very little for you and, in as much, has few opinions about things.
Font Awesome
Awesome font glyphs.
Interesting narrated walkthroughs Supported by...?
let and const
class and super
Syntactic sugar for property and method declarations
Arrow functions
Proxy objects
Reflection methods
"Spreading", otherwise known as splicing, arrays and strings into other arrays and function calls
Sticky regular expressions
Collections Native non-Array collections
Weak native non-Array collections
Strongly-typed Arrays
Views into strongly-typed Arrays
Destructuring Complex direct assignments
Complex assignments of default parameters
Complex assignments of parameter values
Complex assignment to a spread
Flow control for..of loops (instead of
Generator functions (and the yield keyword)
Functions Turning functions into methods
Default function parameters
Binding the remaining parameters of a function to a single variable
Name property of functions
Tail-call recursion
Block-level scoping of function declarations
Metaprogramming Computed properties
Getter and setter prototype property
Mixin properties of other objects
Use a function to set the prototype of an object
Modules export keyword
Module loader
String handling Template strings
Destructuring template strings
New string from repeating a single string
Programmatic substitution in template strings
Symbols Simple symbols as properties
Advanced symbols for conversion
Boring text-only experiences Supported by...?
Array extensions Array.from
Math extensions Math.acosh (inverse hyperbolic cosine)
Math.asinh (inverse hyperbolic sine)
Math.atanh (inverse hyperbolic tangent)
Math.cbrt (cube root)
Math.clz32 (count leading zero bits)
Math.cosh (hyperbolic cosine)
Math.expm1 (ex - 1)
Math.fround (float round)
Math.hypot (square root of the sum of squares)
Math.imul (integer multiplication)
Math.log10 (base-10 logarithm)
Math.log1p (natural logarithm of 1 + x)
Math.log2 (base-2 logarithm)
Math.sign (the sign of a number)
Math.sinh (hyperbolic sine)
Math.tanh (hyperbolic tangent)
Math.trunc (truncation of the fraction part of a number)
Number extensions Number.EPSILON
Regular expression extensions RegExp "u" flag
String handling String.fromCodePoint
String.prototype HTML methods
Unicode code point escapes