var greeting =
"Hello, " + user.first + " " + user.last + "!";
var url =
"www.mysite.com" + "/foo/" + fooId + "/bar/" + barId;
ES5:
var greeting = `Hello, ${user.first} ${user.last}!`;
var url = `www.mysite.com/foo/${fooId}/bar/${barId}`;
ES6:
Slide 17
Slide 17 text
multi-line strings
Slide 18
Slide 18 text
var poem = "so much depends\n"
+ "upon\n\n"
+ "a red wheel\n"
+ "barrow\n\n"
+ "glazed with rain\n"
+ "water\n\n"
+ "beside the white\n"
+ "chickens";
ES5:
Slide 19
Slide 19 text
var poem =
`so much depends
upon
a red wheel
barrow
glazed with rain
water
beside the white
ES6:
var myStringArray = new Array("blue");
// ["blue"]
var myBoolArray = new Array(false);
// [false]
ES5:
Slide 29
Slide 29 text
var myStringArray = new Array("blue");
// ["blue"]
var myBoolArray = new Array(false);
// [false]
var myIntArray = new Array(2);
// [undefined x 2]
ES5:
Slide 30
Slide 30 text
var myIntArray = new Array(2);
// [undefined x 2]
ES5:
var fixedIntArray = Array.of(2);
// [2]
ES6:
var body = ['head', 'shoulders', 'knees', 'toes'];
for (var i = 0; i < body.length; i++) { tap(body[i]); }
ES5:
Slide 36
Slide 36 text
var body = ['head', 'shoulders', 'knees', 'toes'];
for (var i = 0; i < body.length; i++) { tap(body[i]); }
ES5:
var body = ['head', 'shoulders', 'knees', 'toes'];
for (var part of body) {
tap(part);
}
ES6:
Slide 37
Slide 37 text
var alphabet = 'abcdefg';
for (var letter of alphabet) {
sing(letter);
}
ES6:
E
Slide 38
Slide 38 text
[Symbol.iterator]
Slide 39
Slide 39 text
var alphabet = 'az';
var iter = alphabet[Symbol.iterator]();
iter.next(); // { done: false, value: 'a' }
iter.next(); // { done: false, value: 'z' }
ES6:
E
Slide 40
Slide 40 text
var alphabet = 'az';
var iter = alphabet[Symbol.iterator]();
iter.next(); // { done: false, value: 'a' }
iter.next(); // { done: false, value: 'z' }
iter.next(); // { done: true, value: undefined }
ES6:
E
Slide 41
Slide 41 text
destructuring
Slide 42
Slide 42 text
[ ] = fooArray;
Slide 43
Slide 43 text
{ } = fooObject;
Slide 44
Slide 44 text
var x, y, z, coords;
coords = [29, 22, 37];
x = coords[0];
y = coords[1];
z = coords[2];
ES5:
Slide 45
Slide 45 text
var x, y, z, coords;
coords = [29, 22, 37];
x = coords[0];
y = coords[1];
z = coords[2];
ES5:
var coords = [29, 22, 37];
var [x, y, z] = coords;
ES6:
Slide 46
Slide 46 text
var x, y, z, coords;
coords = [29, 22, 37];
x = coords[0];
y = coords[1];
z = coords[2];
ES5:
var coords = [29, 22, 37];
var [x, y, z] = coords;
var [foo, , bar] = coords;
ES6:
Slide 47
Slide 47 text
var user, email, display;
user = { name: 'Jeff', email: '[email protected]' };
email = user.email;
display = user.name;
ES5:
Slide 48
Slide 48 text
var user, email, display;
user = { name: 'Jeff', email: '[email protected]' };
email = user.email;
display = user.name;
ES5:
var user = { name: 'Jeff', email: '[email protected]' };
var {email} = user;
ES6:
Slide 49
Slide 49 text
var user, email, display;
user = { name: 'Jeff', email: '[email protected]' };
email = user.email;
display = user.name;
ES5:
var user = { name: 'Jeff', email: '[email protected]' };
var {email} = user;
var {name: display} = user;
ES6:
Slide 50
Slide 50 text
var point = [10, 2];
var [x, y, z = 0] = point;
console.log(z); // 0, not undefined
var user = { name: 'Jeff', email: '[email protected]' };
var {name, phone = '867-5309'} = user;
console.log(phone); // '867-5309', not undefined
ES6:
var drawRect = function({w=1, h=1, color='orange'} = {}) {
/* draw stuff */
return {area: w * h, hex: getHex(color)};
};
var rect = drawRect({color: 'blue'})
console.log(rect); // {area: 1, hex: '#0000FF'}
ES6:
Slide 59
Slide 59 text
{ scope }
Slide 60
Slide 60 text
block-scoped vars
Slide 61
Slide 61 text
block-scoped vars
Slide 62
Slide 62 text
function-scoped
Slide 63
Slide 63 text
var foo = function(bar) {
if (bar) {
var message = 'Hello!'; // declared here
alert(message);
}
return message; // still in scope here
};
ES5:
Slide 64
Slide 64 text
iife
IMMEDIATELY
INVOKED
FUNCTION
EXPRESSION
Slide 65
Slide 65 text
var foo = function(bar) {
if (bar) {
(function() {
var message = 'Hello!'; // declared here
alert(message);
})();
}
return message; // ReferenceError: message is not defined
};
ES5:
Slide 66
Slide 66 text
closure
Slide 67
Slide 67 text
// assume links has an array of DOM elements
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
console.log(i);
};
}
// whoops! all links log the max index!
ES5:
Slide 68
Slide 68 text
// assume links has an array of DOM elements
for (var i = 0; i < links.length; i++) {
links[i].onclick = (function(x) {
return function() {
console.log(x); // preserved context
};
})(i);
}
// clicking links gives the correct result
ES5:
Slide 69
Slide 69 text
hoisting & globals
Slide 70
Slide 70 text
function foo() {
x = 10;
y = 20;
var x, y;
var area = x * y;
return area;
};
ES5:
Slide 71
Slide 71 text
function foo() {
x = 10;
y = 20;
var x, y;
var area;
area = x * y;
return area;
};
ES5:
Slide 72
Slide 72 text
function foo() {
var x, y;
var area;
x = 10;
y = 20;
area = x * y;
return area;
};
ES5:
Slide 73
Slide 73 text
function foo() {
var x, y;
// yikes! area may be in the global scope!
x = 10;
y = 20;
area = x * y;
return area;
};
ES5:
Slide 74
Slide 74 text
let
Slide 75
Slide 75 text
function(bar) {
if (bar) {
var message = 'Hello!'; // declared here
alert(message);
}
return message; // still in scope here
};
ES5:
Slide 76
Slide 76 text
function(bar) {
if (bar) {
let message = 'Hello!'; // declared here
alert(message);
}
return message; // ReferenceError: message is not defined
};
ES6:
Slide 77
Slide 77 text
// assume links has an array of DOM elements
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
console.log(i);
};
};
// whoops! all links log the max index!
ES5:
Slide 78
Slide 78 text
// assume links has an array of DOM elements
for (let i = 0; i < links.length; i++) {
links[i].onclick = function() {
console.log(i);
};
};
// all better, with no IIFE or extra closure!
ES6:
Slide 79
Slide 79 text
temporal dead zone
Slide 80
Slide 80 text
function foo() {
x = 10; // ReferenceError: x is not defined
y = 20;
let x, y;
let area = x * y;
return area;
};
ES6:
Slide 81
Slide 81 text
arrow functions
Slide 82
Slide 82 text
syntax
Slide 83
Slide 83 text
(args) => { statements }
Slide 84
Slide 84 text
function logSum(x, y) {
var sum = x + y;
console.log(sum);
}
ES5:
Slide 85
Slide 85 text
function logSum(x, y) {
var sum = x + y;
console.log(sum);
}
ES5:
let logSum = (a, b) => {
let sum = a + b;
console.log(sum);
};
ES6:
Slide 86
Slide 86 text
(args) => expression;
Slide 87
Slide 87 text
function sum(x, y) {
return x + y;
}
ES5:
Slide 88
Slide 88 text
function sum(x, y) {
return x + y;
}
ES5:
let sum = (x, y) => x + y;
ES6:
Slide 89
Slide 89 text
let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = (name) => `Announcing ${name}!`;
let getUser = () => ( { id: 42, name: 'Jeff' } );
ES6:
Slide 90
Slide 90 text
let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = name => `Announcing ${name}!`;
let getUser = () => ( { id: 42, name: 'Jeff' } );
ES6:
Slide 91
Slide 91 text
let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = (name) => `Announcing ${name}!`;
let getUser = () => ( { id: 42, name: 'Jeff' } );
ES6: