Explaining ES6: JavaScript History and What is to Come

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
• TC = Technical Committee
• TC39 = Technical Committee tasked with
ECMAScript ®
• TC39 Ofﬁcial 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
• 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

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
• 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); // undefined
var x = 'foo';
console.log(x); // ‘foo’
}

hoisting
function() {
var x;
console.log(x); // undefined
x = 'foo';
}

`let` : temporal dead zone
function() {
console.log(x); // ReferenceError
// TDZ
let 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 undeﬁned `this` from outer scope
No need for var that = this, `bind` with
arrow functions

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

Arrow functions =>
let add = (a,b) => a + b;
add(2,3); // 5
2 args: needs parens, implicit return

Arrow functions =>
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 strings
string interpolation!
let foo = 'bar';
console.log(`foo = ${foo}`);
// "foo = bar"
let multiline = `first line
and second line
`);
multiline strings

destructuring assignment
let 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 assignment
mixed
let obj = {
foo: 'bar',
colors: ['red', 'green']
}
let {foo, colors: [color1, color2]} = obj;
console.log(foo); // bar
console.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); // bar
obj.boo(); // baz
function without
“: function”

default function params
function 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 params
function doSomething(timeout=2000, {repeat}={repeat:true}) {
setTimeout(function(){
console.log(repeat);
}, timeout);
}
doSomething(0);
// logs "true" right away
ES6

function rest params
function 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.js
export let x = ‘yes';
export default {
foo: 'bar'
};
// file b.js
import { 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 èxtend`, `merge` or `mixin`
• String methods — ìncludes`, `repeat`, `startsWith`
• function.name
• … many more

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 Polyﬁll
• 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

Explaining ES6: JavaScript History and What is to Come

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Explaining ES6: JavaScript History and What is to Come (20)

More from Cory Forsyth (12)

Recently uploaded (20)

Explaining ES6: JavaScript History and What is to Come