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