Like it or not, ECMAScript 6 is coming soon to a browser near you (and what’s not to like about that?). Learning about new additions to the specification is only a few clicks away.
Being in a “feature frozen” status since August of this year, ECMAScript 6 is on its path towards becoming a part of daily life. While the speed with which each browser manufacturer will implement these features will vary, adoption is inevitable.
I won’t waste pixels discussing why ECMAScript 6 is such a big deal. I’m assuming that you are aware of some of the more well-known features and are excited about them. But understandably, it can sometimes be difficult to decide where to jump in. I’ve gone through the tons of ECMAScript 6 bookmarks that have piled-up in my Google Docs and detailed the best ones below. This is by no means an exhaustive list; I tried to limit it to articles or videos that I felt were the most well-presented.
ECMAScript 6 Introduction
ECMAScript Language Specification ECMA-262 6th Edition – DRAFT
https://people.mozilla.org/~jorendorff/es6-draft.html
It doesn’t get much drier than this. But sometimes dry is good. There are many links out there that will be more enjoyable to read (and possibly more helpful), but when you really need to drill-down on a particular topic, the specification is always a source worth considering.
ECMAScript 6 with Kit Cambridge
Kit does a really nice job here. He starts out with a history of JavaScript that is worth the price of admission alone. Instead of just regurgitating key dates and facts, he helps you understand why the ECMAScript standard has evolved the way it has (did you know that ECMAScript 4 never survived beyond “draft” status?). He then prioritizes some of the less “sexy” features such as: the Spread operator, Default parameters, the Destructuring Assignment, Symbols and Generators. This guy is pretty young, but he is incredibly smart, super-technical, and presents himself very well.
Kit Cambridge, “EcmaScript Next: The Subtleties of ES 6” at W3Conf 2013
This is technically the same exact presentation as the previous video. But I must say, just like watching a good band perform the same song on two different occasions, it is still worth watching, even if you have seen the previous video.
Announcing Understanding ECMAScript 6 | NCZOnline
http://www.nczonline.net/blog/2014/03/26/announcing-understanding-ecmascript-6/
https://leanpub.com/understandinges6/read/
https://github.com/nzakas/understandinges6
OK, the first link is actually promoting his book: “Understanding ECMAScript 6”. But I wanted to include it because Nicholas C. Zakas is a JavaScript developer who is really worth listening to. I think the intro blog post is worth a read. The second link is where you can read the current state of the book. The third link is the GitHub repository for the book, in case you want to follow his work in real-time.
Toward Modern Web Apps with ECMAScript 6 | Blog | Sencha
http://www.sencha.com/blog/toward-modern-web-apps-with-ecmascript-6/
Ariya Hidayat presents a clear and well-thought-out overview of some of ECMAScript 6’s most exciting features.
ECMAScript 6 Features
While there is much to shout about, it can also be a bit overwhelming. Here are the ECMAScript 6 features you are most likely to experiment with, or be asked about in an interview.
Arrow Functions
Functions have gotten a significant injection of new functionality: Greater control over lexical “this” binding and streamlined syntax.
Arrow functions – JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
ECMAScript Wiki – Arrow Functions
http://tc39wiki.calculist.org/es6/arrow-functions/
Understanding ECMAScript 6 arrow functions | NCZOnline
http://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/
Kevin Chisholm – Blog
Block-Level Scope
Learn about how the new “let” and “const” keywords break the “functions-only” paradigm with regard to managing scope.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
http://www.sitepoint.com/preparing-ecmascript-6-let-const/
Rest parameters
If you’ve ever written a function that needs to take a variable number of arguments, you’ve probably used the Array.prototype.slice.call approach to convert the arguments object into a true array, or designed the function so that it expects an array. ECMAScript 6’s Rest Parameters removes this pain and makes for more concise code.
Rest parameters – JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
Default and Rest Parameters in ES6
http://www.htmlxprs.com/post/24/es6-functions-default-and-rest-parameters
ECMAScript 6 and Rest Parameter
http://ariya.ofilabs.com/2013/03/es6-and-rest-parameter.html
Spread Operator
A yang to the Rest Parameter’s ying, the Spread Operator allows you to pass the elements of an array to a function as individual arguments in one shot, without the need to iterate that array.
Spread operator – JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
ECMAScript 6 and Spread Operator
http://ariya.ofilabs.com/2013/03/es6-and-spread-operator.html
Classes
Although constructors provide a way to implement classes JavaScript, ECMAScript 6 introduces a syntax that more closely resembles languages such as Java and PHP, not only in the way you create a class, but also in how you inherit from it.
An introduction to ES6 classes
http://javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial/
Use ECMAScript 6 Today – Tuts+ Code Article
http://code.tutsplus.com/articles/use-ecmascript-6-today–net-31582#class
