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
ECMAscript support
- @kangax
-
kangax maintains the ECMAscript compatibility tables over on
GitHub. This site specifically uses the
data-es6.jsfor information about ES6 features and the tests that demonstrate that. - Ace code editor
- Used in all of the example pages. Thanks, Ace guys.
- traceur
- 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.
- Mousetrap
- 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 | ||
| Promises | ||
| 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 for..in) |
|
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 | |
| Array.of | ||
| Array.prototype.copyWithin | ||
| Array.prototype.entries | ||
| Array.prototype.fill | ||
| Array.prototype.find | ||
| Array.prototype.findIndex | ||
| Array.prototype.keys | ||
| Array.prototype.values | ||
| Array.prototype[Symbol.unscopables] | ||
| 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 | |
| Number.MAX_SAFE_INTEGER | ||
| Number.MIN_SAFE_INTEGER | ||
| Number.isFinite | ||
| Number.isInteger | ||
| Number.isNaN | ||
| Number.isSafeInteger | ||
| Regular expression extensions | RegExp "u" flag | |
| RegExp.prototype.compile | ||
| RegExp.prototype.match | ||
| RegExp.prototype.replace | ||
| RegExp.prototype.search | ||
| RegExp.prototype.split | ||
| String handling | String.fromCodePoint | |
| String.prototype HTML methods | ||
| String.prototype.codePointAt | ||
| String.prototype.contains | ||
| String.prototype.endsWith | ||
| String.prototype.normalize | ||
| String.prototype.startsWith | ||
| Unicode code point escapes | ||