An overview of some of the history of JavaScript, how it became ECMAScript (and what Ecma is), as well as highlights of the new features and syntax in ES6 aka ES2015. Originally presented to the New York Public Library on June 4 2015.

1. ES6
Cory Forsyth
@bantic

2. Cory Forsyth
@bantic

3. JavaScript History

4. 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

5. JavaScript History
• Invented at Netscape by Brendan Eich
• Mocha -> LiveScript -> JavaScript
• 1996 -> Standardization taken by Ecma
• Renamed -> ECMAScript (trademark reasons)

6. 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”

8. Ecma Org Chart

9. 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

10. ECMAScript
• 1997: ECMA-262: Language Standard
• On github (now): tc39/ecma262
• 1998 ES2
• 1999 ES3

11. ECMAScript
• 2000: ES4

12. ECMAScript
• 2000: ES4

13. ECMAScript
• 2000: ES4
• 2005: ES4
• Mozilla and Macromedia
• Big changes, major leap from ES5

14. ECMAScript
• 2000: ES4
• 2005: ES4
• Mozilla and Macromedia
• Big changes, major leap from ES5
• Divisive, Yahoo & Microsoft opposed

15. ECMAScript
• 2000: ES4
• 2005: ES4
• Mozilla and Macromedia
• Big changes, major leap from ES5
• Divisive, Yahoo & Microsoft opposed

16. ES5
• 2009 in Oslo
• “Modern” JavaScript
• Originally v3.1 (incremental change)
• “Harmony”

17. ES6
• Will be released in 2015
• After this, versions will be released yearly:
• ES2015
• ES2016
• …

18. ES2015: What’s New?

19. ES2015
• Syntax Changes
• New features
• Fixes
• Superset of ES5

20. 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

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

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

23. `let` : temporal dead zone
function() {
console.log(x); // ReferenceError
// TDZ
let x = 'foo';
console.log(x); // ‘foo’
}

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

25. `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

26. `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

27. Arrow functions =>
var x = function() {} let x = () => {}
• Has own scope
• Has `arguments`
• No implicit return
• “lexical” scope
• No `arguments`
• implicit return*
• *sometimes

28. 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

29. 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]

30. 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]
let add = (a,b) => a + b;
add(2,3); // 5
2 args: needs parens, implicit return

31. 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]
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

32. Arrow functions =>
`arguments` from outer scope
let x = function() {
return () => {
alert(arguments[0]);
};
}
let y = x(5);
y();
uses x’s arguments

33. template strings
string interpolation!
let foo = 'bar';
console.log(`foo = ${foo}`);
// "foo = bar"
let multiline = `first line
and second line
`);
multiline strings

34. 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

35. destructuring assignment
mixed
let obj = {
foo: 'bar',
colors: ['red', 'green']
}
let {foo, colors: [color1, color2]} = obj;
console.log(foo); // bar
console.log(color2); // green

36. 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”

37. 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

38. default function params
function doSomething(timeout=2000, {repeat}={repeat:true}) {
setTimeout(function(){
console.log(repeat);
}, timeout);
}
doSomething(0);
// logs "true" right away
ES6

39. 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

40. 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)

41. 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

42. 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

43. 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

44. What’s the status today?

46. How do I use it?

48. 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)

49. 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

50. 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