Explaining ES6: JavaScript History and What is to Come

ES6Cory Forsyth

@bantic

Cory Forsyth @bantic

JavaScript History

JavaScript is not a Language

• JavaScript is an implementation of a language

• ActionScript was another implementation

• The name of the language is: ECMAScript

• JavaScript : ECMAScript :: Rubinius/JRuby : Ruby

JavaScript History• Invented at Netscape by Brendan Eich

• Mocha -> LiveScript -> JavaScript

• 1996 -> Standardization taken by Ecma

• Renamed -> ECMAScript (trademark reasons)

ECMAScript• What is Ecma?

• “Ecma International is an industry association … dedicated to the standardization of Information and Communication Technology”

• Its website slogan is: “Standards@Internet Speed”

Ecma Org Chart

Ecma Org Chart• TC = Technical Committee

• TC39 = Technical Committee tasked with ECMAScript ®

• TC39 Official Scope: “Standardization of the general purpose, cross platform, vendor-neutral programming language ECMAScript.”

• Ecma = European Computer Manufacturers Association

ECMAScript

• 1997: ECMA-262: Language Standard

• On github (now): tc39/ecma262

• 1998 ES2

• 1999 ES3

ECMAScript• 2000: ES4

ECMAScript• 2000: ES4

ECMAScript• 2000: ES4

• 2005: ES4

• Mozilla and Macromedia

• Big changes, major leap from ES5

ECMAScript• 2000: ES4

• 2005: ES4

• Mozilla and Macromedia

• Big changes, major leap from ES5

• Divisive, Yahoo & Microsoft opposed

ECMAScript• 2000: ES4

• 2005: ES4

• Mozilla and Macromedia

• Big changes, major leap from ES5

• Divisive, Yahoo & Microsoft opposed

ES5• 2009 in Oslo

• “Modern” JavaScript

• Originally v3.1 (incremental change)

• “Harmony”

ES6• Will be released in 2015

• After this, versions will be released yearly:

• ES2015

• ES2016

• …

ES2015: What’s New?

ES2015

• Syntax Changes

• New features

• Fixes

• Superset of ES5

if (true) {var x = 'yes';

}console.log(x); // 'yes'

if (true) {let x = 'yes';

}console.log(x); // ReferenceError

var is hoisted

let is block scope

`let` there be light scope

hoisting

function() {console.log(x); // undefinedvar x = 'foo';console.log(x); // ‘foo’

}

hoisting

function() { var x;

console.log(x); // undefinedx = 'foo';console.log(x); // ‘foo’

}

`let` : temporal dead zone

function() {console.log(x); // ReferenceError// TDZlet x = 'foo';console.log(x); // ‘foo’

}

`let` there be sanity

let funcs = [];for (var i=0; i < 5; i++) { funcs.push(function() { alert(i); });}funcs[0]();

`let` there be sanity

let funcs = [];for (let i=0; i < 5; i++) { funcs.push(function() { alert(i); });}funcs[0]();

a new i for each turn of the loop

`const`const x = 'foo';x = 'bar'; // error

const x = {foo: 'bar'

};x.foo = 'baz'; // ok (!)

can modify properties of a const

cannot reassign const

use Object.freeze, Object.seal to prevent changes to an object

Arrow functions =>var x = function() {} let x = () => {}

• Has own scope

• Has `arguments`

• No implicit return

• “lexical” scope

• No `arguments`

• implicit return*

• *sometimes

Arrow functions =>

this.x = 'yes';let y = () => { "use strict"; console.log(this.x);};y(); // 'yes'

this.x = 'yes';var y = function(){ "use strict"; console.log(this.x);};y(); // TypeError…

`this` is undefined `this` from outer scope

No need for var that = this, `bind` with arrow functions

Arrow functions =>1 arg: no parens, implicit returnlet square = x => x * x;let squares = [1,2,3].map(square);console.log(squares) // [1,4,9]

Arrow functions =>1 arg: no parens, implicit returnlet square = x => x * x;let squares = [1,2,3].map(square);console.log(squares) // [1,4,9]

let add = (a,b) => a + b;add(2,3); // 5

2 args: needs parens, implicit return

Arrow functions =>1 arg: no parens, implicit returnlet square = x => x * x;let squares = [1,2,3].map(square);console.log(squares) // [1,4,9]

let add = (a,b) => a + b;add(2,3); // 5

2 args: needs parens, implicit return

let add = (a,b) => { return a + b };add(2,3); // 5

function body: use {}, explicit return

Arrow functions =>`arguments` from outer scope

let x = function() {return () => {

alert(arguments[0]);};

}let y = x(5);y();

uses x’s arguments

template stringsstring interpolation!

let foo = 'bar';console.log(`foo = ${foo}`);// "foo = bar"

let multiline = `first lineand second line

`);

multiline strings

destructuring assignmentlet obj = {

foo: 'bar',boo: 'baz'

};let {foo, boo} = obj;console.log(foo); // 'bar'console.log(boo); // 'baz'

let colors = ['red', 'green'];let [color1, color2] = colors;console.log(color2); // green

for objects

for arrays

destructuring assignmentmixed

let obj = {foo: 'bar',colors: ['red', 'green']

}let {foo, colors: [color1, color2]} = obj;console.log(foo); // barconsole.log(color2); // green

shorthand object assignment

same property and variable name

let foo = 'bar';

let obj = {foo,boo() {

console.log('baz');}

}

console.log(obj.foo); // barobj.boo(); // baz

function without “: function”

default function paramsfunction doSomething(timeout, options) {

timeout = timeout || 2000;options = options || {repeat: true};var repeat = options.repeat;setTimeout(function(){

console.log(repeat);}, timeout);

}

doSomething(0);// logs 'true' after 2000ms

ES5

default function paramsfunction doSomething(timeout=2000, {repeat}={repeat:true}) {

setTimeout(function(){console.log(repeat);

}, timeout);}

doSomething(0);// logs "true" right away

ES6

function rest paramsfunction sum(first, ...others) {

let sum = first;for (let i of others) {

sum = sum + i;}console.log(sum);

}sum(1, 2, 3, 4); // 10

others is an array of remaining args

spread operator

function sum2(first, ...others) {console.log(sum + Math.max(...others));

}sum2(1, 2, 4, 3); // 5 (=== 1 + 4)

Math.max(…others) is equivalent to Math.max(2,4,3)

classes

class Person { constructor() { this.name = 'Cory'; } sayHi() { console.log(this.name); }}

let p = new Person();p.sayHi(); // Cory

extend and super also work as expected

modules

named export// file a.jsexport let x = ‘yes';

export default {foo: 'bar'

};

// file b.jsimport { x } from 'a';console.log(x); // yes

import stuff from 'a';console.log(stuff.foo); // bar

named import

default export

default import

Other ES2015 features

• Object.is() — fixes == and === • Unicode support • Promises for async support • Symbols — a new primitive • iterators and generators • Map, Set • Object.assign() — aka `extend`, `merge` or `mixin` • String methods — `includes`, `repeat`, `startsWith` • function.name • … many more

What’s the status today?

How do I use it?

Babel support

• Many ES2015 (aka ES6) features and syntax • Some ES2016 (aka ES7) features and syntax • Some things transpiled directly to ES5 • Some supported via Polyfill • Some not supported yet (Proxies, in particular)

The JavaScript Future

• Transpiling • Not just a transitionary thing

• Support matrices • ES is a living standard • Venn Diagram of ES2015 / ES2016 / Browser Support

• As target browsers support features your code uses, turn off transpilation of those features

Cory Forsyth @bantic

Thank you!

• Babel and Babel REPL • Using ES6 Today • ES6 Glossary • ES6+ Compatibility Table • ES6 Overview Slides • ECMA-262 Living Standard on github • Ecma International • ES6 Learning • Aligning Ember With Web Standards • http://bit.ly/bantic-es6 — these slides

Links