adding es6 to your developer toolbox
TRANSCRIPT
![Page 1: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/1.jpg)
#devES6ADDING ES6 TO YOUR TOOLBOX
@ j e f f re y s t r au s s
![Page 2: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/2.jpg)
”ES6? That's the new JavaScript!
~ mr. developer
![Page 3: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/3.jpg)
”No!
~ me
![Page 4: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/4.jpg)
ECMAScript
![Page 5: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/5.jpg)
![Page 6: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/6.jpg)
![Page 7: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/7.jpg)
ECMAScript2015
![Page 8: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/8.jpg)
not all-or-nothingexperimentES6 IS AN EVOLUTION
![Page 9: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/9.jpg)
experimentNOT ALL-OR-NOTHING
![Page 10: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/10.jpg)
strings
![Page 11: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/11.jpg)
template literals
![Page 12: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/12.jpg)
var greeting =
"Hello, " + user.first + " " + user.last + "!";
var url =
"www.mysite.com" + "/foo/" + fooId + "/bar/" + barId;
ES5:
![Page 13: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/13.jpg)
`backticks`
![Page 14: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/14.jpg)
${expression}
![Page 15: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/15.jpg)
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:
![Page 16: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/16.jpg)
multi-line strings
![Page 17: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/17.jpg)
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:
![Page 18: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/18.jpg)
var poem =
`so much depends
upon
a red wheel
barrow
glazed with rain
water
beside the white
chickens`;
ES6:
![Page 19: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/19.jpg)
default parameters
![Page 20: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/20.jpg)
var drawRect = function(width, height, color) {
width = width || 1;
height = height || 1;
color = color || 'orange';
/* draw stuff */
return width * height;
};
ES5:
![Page 21: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/21.jpg)
var drawRect = function(width, height, color) {
width = width || 1;
height = height || 1;
color = color || 'orange';
/* draw stuff */
return width * height;
};
drawRect(); // draws orange; returns 1
drawRect(0, 4, 'blue'); // draws blue, but returns 4
ES5:
![Page 22: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/22.jpg)
var drawRect = function(width=1, height=1, color='orange') { /* draw stuff */
return width * height;
};
ES6:
![Page 23: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/23.jpg)
var drawRect = function(width=1, height=1, color='orange') { /* draw stuff */
return width * height;
};
drawRect(0, 4, 'blue'); // returns 0
ES6:
![Page 24: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/24.jpg)
collections
![Page 25: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/25.jpg)
arrays
![Page 26: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/26.jpg)
var myStringArray = new Array("blue");
// ["blue"]
var myBoolArray = new Array(false);
// [false]
var myIntArray = new Array(2);
// [undefined x 2]
ES5:
![Page 27: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/27.jpg)
var myIntArray = new Array(2);
// [undefined x 2]
ES5:
var fixedIntArray = Array.of(2); // [2]
ES6:
![Page 28: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/28.jpg)
function getArgsArray() {
return Array.prototype.slice.apply(arguments);
};
getArgsArray('foo', true, 42);
// ['foo', true, 42]
ES5:
![Page 29: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/29.jpg)
function getArgsArray() {
return Array.prototype.slice.apply(arguments);
};
getArgsArray('foo', true, 42);
// ['foo', true, 42]
ES5:
function getArgsArray() {
return Array.from(arguments); };
getArgsArray('foo', true, 42);
// ['foo', true, 42]
ES6:
![Page 30: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/30.jpg)
iterables
![Page 31: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/31.jpg)
`for-of` loop
![Page 32: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/32.jpg)
var body = ['head', 'shoulders', 'knees', 'toes'];
for (var i = 0; i < body.length; i++) { tap(body[i]) };
ES5:
![Page 33: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/33.jpg)
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:
![Page 34: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/34.jpg)
var alphabet = 'abcdefg';
for (var letter of alphabet) {
sing(letter);
}
ES6:
ES6:
![Page 35: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/35.jpg)
...spread operator
![Page 36: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/36.jpg)
var alphabet = 'abcdefg';
function sing() {
console.log(arguments);
}
sing(...alphabet); // ["a", "b", "c", "d", "e", "f", "g"]
ES6:
ES6:
![Page 37: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/37.jpg)
destructuring
![Page 38: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/38.jpg)
[ ] = fooArray;
![Page 39: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/39.jpg)
{ } = fooObject;
![Page 40: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/40.jpg)
var x, y, z, coords;
coords = [29, 22, 37];
x = coords[0];
y = coords[1];
z = coords[2];
ES5:
![Page 41: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/41.jpg)
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:
![Page 42: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/42.jpg)
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:
![Page 43: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/43.jpg)
var user, email, display;
user = { name: 'Jeff', email: '[email protected]' };
email = user.email;
display = user.name;
ES5:
![Page 44: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/44.jpg)
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:
![Page 45: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/45.jpg)
swapping variables
![Page 46: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/46.jpg)
var temp = x;
x = y;
y = temp;
ES5:
[y, x] = [x, y];
ES6:
![Page 47: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/47.jpg)
process return values
![Page 48: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/48.jpg)
var drawRect = function(width=1, height=1, color='orange') {
/* draw stuff */
return {area: width * height, hex: getHex(color)};
};
ES6:
![Page 49: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/49.jpg)
var drawRect = function(width=1, height=1, color='orange') {
/* draw stuff */
return {area: width * height, hex: getHex(color)};
};
var {area, hex: rgb} = drawRect(4, 6, 'blue');
// area == 24, rgb == '#0000FF'
ES6:
![Page 50: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/50.jpg)
{ scope }
![Page 51: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/51.jpg)
block-scoped vars
![Page 52: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/52.jpg)
function-scoped
![Page 53: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/53.jpg)
var foo = function(bar) {
if (bar) {
var message = 'Hello!'; // declared here
alert(message);
}
return message; // still in scope here };
ES5:
![Page 54: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/54.jpg)
iifeIMMEDIATELY INVOKED FUNCTION EXPRESSION
![Page 55: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/55.jpg)
var foo = function(bar) {
if (bar) {
(function() { var message = 'Hello!'; // declared here
alert(message);
})(); }
return message; // ReferenceError: message is not defined };
ES5:
![Page 56: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/56.jpg)
closure
![Page 57: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/57.jpg)
// 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:
![Page 58: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/58.jpg)
// 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:
![Page 59: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/59.jpg)
hoisting & globals
![Page 60: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/60.jpg)
function foo() {
x = 10;
y = 20;
var x, y;
var area = x * y;
return area;
};
ES5:
![Page 61: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/61.jpg)
function foo() {
var x, y;
var area;
x = 10;
y = 20;
area = x * y;
return area;
};
ES5:
![Page 62: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/62.jpg)
function foo() {
var x, y;
// yikes! area may be in the global scope!
x = 10;
y = 20;
area = x * y;
return area;
};
ES5:
![Page 63: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/63.jpg)
let
![Page 64: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/64.jpg)
function(bar) {
if (bar) {
var message = 'Hello!'; // declared here
alert(message);
}
return message; // still in scope here };
ES5:
![Page 65: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/65.jpg)
function(bar) {
if (bar) {
let message = 'Hello!'; // declared here alert(message);
}
return message; // ReferenceError: message is not defined };
ES6:
![Page 66: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/66.jpg)
// 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:
![Page 67: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/67.jpg)
// 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:
![Page 68: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/68.jpg)
temporal dead zone
![Page 69: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/69.jpg)
function foo() {
x = 10; // ReferenceError: x is not defined
y = 20;
let x, y; let area = x * y;
return area;
};
ES6:
![Page 70: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/70.jpg)
arrow functions
![Page 71: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/71.jpg)
syntax
![Page 72: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/72.jpg)
(args) => { statements }
![Page 73: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/73.jpg)
function logSum(x, y) {
var sum = x + y;
console.log(sum);
}
ES5:
![Page 74: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/74.jpg)
function logSum(x, y) {
var sum = x + y;
console.log(sum);
}
ES5:
let logSum = (a, b) => { let sum = a + b;
console.log(sum);
};
ES6:
![Page 75: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/75.jpg)
(args) => expression;
![Page 76: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/76.jpg)
function sum(x, y) {
return x + y;
}
ES5:
let sum = (x, y) => x + y;ES6:
![Page 77: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/77.jpg)
let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = (name) => `Announcing ${name}!`;
let getUser = () => ( { id: 42, name: 'Jeff' } );
ES6:
![Page 78: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/78.jpg)
let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = name => `Announcing ${name}!`;
let getUser = () => ( { id: 42, name: 'Jeff' } );
ES6:
![Page 79: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/79.jpg)
let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = (name) => `Announcing ${name}!`;
let getUser = () => ( { id: 42, name: 'Jeff' } );
ES6:
![Page 80: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/80.jpg)
lexical `this`
![Page 81: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/81.jpg)
var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
setTimeout(function() {
console.log('Hello, ' + this.name + '!');
}, 3000);
}
};
ES5:
![Page 82: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/82.jpg)
var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name); setTimeout(function() {
console.log('Hello, ' + this.name + '!');
}, 3000);
}
};
person.greet();
// Now greeting Jeff
ES5:
![Page 83: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/83.jpg)
var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
setTimeout(function() {
console.log('Hello, ' + this.name + '!'); }, 3000);
}
};
person.greet();
// Now greeting Jeff
// Hello, !
ES5:
![Page 84: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/84.jpg)
that | self
![Page 85: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/85.jpg)
{ }.bind(this)
![Page 86: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/86.jpg)
var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
var that = this; setTimeout(function() {
console.log('Hello, ' + that.name + '!'); }, 3000);
}
};
ES5:
![Page 87: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/87.jpg)
var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
setTimeout(function() {
console.log('Hello, ' + this.name + '!'); }.bind(this), 3000); }
};
ES5:
![Page 88: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/88.jpg)
let person = {
name: 'Jeff',
greet: function() {
console.log(`Greeting ${this.name}`);
setTimeout(() => { console.log(`Hello, ${this.name}!`);
}, 3000);
}
};
ES6:
![Page 89: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/89.jpg)
putting it to use
![Page 90: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/90.jpg)
compatibility
![Page 91: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/91.jpg)
http://kangax.github.io
/compat-table/es6
![Page 92: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/92.jpg)
bit.ly/es6-compat
![Page 93: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/93.jpg)
![Page 94: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/94.jpg)
![Page 95: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/95.jpg)
$ npm install --save-dev babel-cli
$ npm install --save-dev babel-preset-es2015
$ echo '{ "presets": ["es2015"] }' > .babelrc
$ babel mySource.js -o myTranspiled.js
![Page 96: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/96.jpg)
flexibility
![Page 97: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/97.jpg)
flexibility
![Page 98: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/98.jpg)
babeljs.io/repl
![Page 99: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/99.jpg)
not all-or-nothingNEXT STEPS
![Page 100: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/100.jpg)
es6 is an evolution
![Page 101: Adding ES6 to Your Developer Toolbox](https://reader036.vdocuments.net/reader036/viewer/2022062522/588380e11a28ab22688b74f3/html5/thumbnails/101.jpg)
evolve