es6: the future of javascript
TRANSCRIPT
Background
The current version of JavaScript is called
ECMAScript 5 or ES5. Why? It’s complicated.
The next version is ES6 (AKA ES.next, ES2015,
ES6 Harmony).
Motivation: JavaScript has blown up in popularity
and is being used in ways that were never imagined
when it was first designed.
It’s time for JavaScript to grow up and become a
“real” language.
Features
Arrow Functions
Default Function Arguments
Destructuring
Block Scoping
String Interpolation (aka template strings)
Classes
Iterators
Modules
Promises
And a lot more. The spec is 600+ pages long.
Arrow Functions
Should seem familiar if you’ve programmed in Ruby,
Scala, CoffeeScript, and many other languages.
var log = (msg) => console.log(msg)
var log = function(msg) {
console.log(msg)
}
Default Function Arguments
function hello(who = 'world') {
console.log('Hello ' + who);
}
hello() // Hello world
Destructuring
var [a, b] = ['hello', 'world'];
console.log(a === 'hello'); // true
console.log(b === 'world'); // true
Block Scoping
function foo(bar) {
if (!bar) {
let baz = 'baz';
return baz;
}
return 'foo';
}
String Interpolation
var foo = 'Foo';
var bar = 'Baz';
console.log(
`Hey ${foo}, check out ${bar}`
);
Classes
class Person {
constructor(name) {
this.name = name;
}
introduce() {
console.log(`I'm ${this.name}`);
}
}
var rob = new Person('Rob');
rob.introduce(); // I’m Rob
Modules
-- models.js
class Person {...}
class Developer extends Person {...}
export {Person, Developer}
-- app.js
import {Developer} from './models';
var dev = new Developer();
Transpilers
Not all features are transpile-able. (Sub-classing
built-ins, Proxies, typed-arrays, etc.)
Requires a build process but that’s simple to
implement with modern tooling. (You should
probably have a build process anyway)
Two major contenders: Babel and Traceur with 78%
and 66% feature coverage respectively.
They’re pretty similar, Babel aims to make readable
ES5 code. It also support JSX, if you’re into that.
Resources
http://kangax.github.io/compat-table/es6/
https://github.com/lukehoban/es6features
https://github.com/thoughtram/es6-babel-
browserify-boilerplate
https://www.youtube.com/watch?v=mPq5S27qWW8