Web developers constantly look for the latest and greatest ways to hone their craft, but changes come fast. From jQuery to Angular to Ember to React, CoffeeScript to TypeScript, it seems there is always something new. But ES6 is something different. With ES6 we are seeing the evolution of core JavaScript. It includes syntactic improvements and great new features never before seen in client-side code. Linters and transpilers for ES6 are readily available and easy to use. There is no need to wait; learn how to leverage the power of "the new JavaScript" in your applications, today!

1. #devES6
A D D I N G E S 6 T O YO U R T O O L B OX
@ j e f f r e y s t r a u s s

2. ”ES6? That's the new JavaScript!
~ mr. developer

3. ”No!
~ me

4. ECMAScript

7. ECMAScript2015

8. not all-or-nothing
experiment
ES6 IS AN EVOLUTION

9. experiment
NOT ALL-OR-NOTHING

10. strings

11. template literals

12. var greeting =
"Hello, " + user.first + " " + user.last + "!";
var url =
"www.mysite.com" + "/foo/" + fooId + "/bar/" + barId;
ES5:

13. `backticks`

14. ${expression}

15. 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:

16. multi-line strings

17. var poem = "so much dependsn"
+ "uponnn"
+ "a red wheeln"
+ "barrownn"
+ "glazed with rainn"
+ "waternn"
+ "beside the whiten"
+ "chickens";
ES5:

18. var poem =
`so much depends
upon
a red wheel
barrow
glazed with rain
water
beside the white
chickens`;
ES6:

19. default
parameters

20. var drawRect = function(width, height, color) {
width = width || 1;
height = height || 1;
color = color || 'orange';
/* draw stuff */
return width * height;
};
ES5:

21. 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:

22. var drawRect = function(width=1, height=1, color='orange') {
/* draw stuff */
return width * height;
};
ES6:

23. var drawRect = function(width=1, height=1, color='orange') {
/* draw stuff */
return width * height;
};
drawRect(0, 4, 'blue'); // returns 0
ES6:

24. collections

25. arrays

26. var myStringArray = new Array("blue");
// ["blue"]
var myBoolArray = new Array(false);
// [false]
var myIntArray = new Array(2);
// [undefined x 2]
ES5:

27. var myIntArray = new Array(2);
// [undefined x 2]
ES5:
var fixedIntArray = Array.of(2);
// [2]
ES6:

28. function getArgsArray() {
return Array.prototype.slice.apply(arguments);
};
getArgsArray('foo', true, 42);
// ['foo', true, 42]
ES5:

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

30. iterables

31. `for-of` loop

32. var body = ['head', 'shoulders', 'knees', 'toes'];
for (var i = 0; i < body.length; i++) { tap(body[i]) };
ES5:

33. 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:

34. var alphabet = 'abcdefg';
for (var letter of alphabet) {
sing(letter);
}
ES6:
E

35. ...spread operator

36. var alphabet = 'abcdefg';
function sing() {
console.log(arguments);
}
sing(...alphabet);
// ["a", "b", "c", "d", "e", "f", "g"]
ES6:
E

37. destructuring

38. [ ] = fooArray;

39. { } = fooObject;

40. var x, y, z, coords;
coords = [29, 22, 37];
x = coords[0];
y = coords[1];
z = coords[2];
ES5:

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

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

43. var user, email, display;
user = { name: 'Jeff', email: 'jeff@aranasoft.com' };
email = user.email;
display = user.name;
ES5:

44. var user, email, display;
user = { name: 'Jeff', email: 'jeff@aranasoft.com' };
email = user.email;
display = user.name;
ES5:
var user = { name: 'Jeff', email: 'jeff@aranasoft.com' };
var {email} = user;
var {name: display} = user;
ES6:

45. swapping variables

46. var temp = x;
x = y;
y = temp;
ES5:
[y, x] = [x, y];
ES6:

47. process return values

48. var drawRect = function(width=1, height=1, color='orange') {
/* draw stuff */
return {area: width * height, hex: getHex(color)};
};
ES6:

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

50. { scope }

51. block-scoped vars

52. function-scoped

53. var foo = function(bar) {
if (bar) {
var message = 'Hello!'; // declared here
alert(message);
}
return message; // still in scope here
};
ES5:

54. iife
IMMEDIATELY
INVOKED
FUNCTION
EXPRESSION

55. var foo = function(bar) {
if (bar) {
(function() {
var message = 'Hello!'; // declared here
alert(message);
})();
}
return message; // ReferenceError: message is not defined
};
ES5:

56. closure

57. // 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:

58. // 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:

59. hoisting & globals

60. function foo() {
x = 10;
y = 20;
var x, y;
var area = x * y;
return area;
};
ES5:

61. function foo() {
var x, y;
var area;
x = 10;
y = 20;
area = x * y;
return area;
};
ES5:

62. function foo() {
var x, y;
// yikes! area may be in the global scope!
x = 10;
y = 20;
area = x * y;
return area;
};
ES5:

63. let

64. function(bar) {
if (bar) {
var message = 'Hello!'; // declared here
alert(message);
}
return message; // still in scope here
};
ES5:

65. function(bar) {
if (bar) {
let message = 'Hello!'; // declared here
alert(message);
}
return message; // ReferenceError: message is not defined
};
ES6:

66. // 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:

67. // 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:

68. temporal dead zone

69. function foo() {
x = 10; // ReferenceError: x is not defined
y = 20;
let x, y;
let area = x * y;
return area;
};
ES6:

70. arrow functions

71. syntax

72. (args) => { statements }

73. function logSum(x, y) {
var sum = x + y;
console.log(sum);
}
ES5:

74. function logSum(x, y) {
var sum = x + y;
console.log(sum);
}
ES5:
let logSum = (a, b) => {
let sum = a + b;
console.log(sum);
};
ES6:

75. (args) => expression;

76. function sum(x, y) {
return x + y;
}
ES5:
let sum = (x, y) => x + y;
ES6:

77. let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = (name) => `Announcing ${name}!`;
let getUser = () => ( { id: 42, name: 'Jeff' } );
ES6:

78. let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = name => `Announcing ${name}!`;
let getUser = () => ( { id: 42, name: 'Jeff' } );
ES6:

79. let speak = () => 'Hello!';
let wrappedMethod = (arg) => innerMethod(arg);
let announce = (name) => `Announcing ${name}!`;
let getUser = () => ( { id: 42, name: 'Jeff' } );
ES6:

80. lexical `this`

81. var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
setTimeout(function() {
console.log('Hello, ' + this.name + '!');
}, 3000);
}
};
ES5:

82. 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:

83. 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:

84. that | self

85. { }.bind(this)

86. var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
var that = this;
setTimeout(function() {
console.log('Hello, ' + that.name + '!');
}, 3000);
}
};
ES5:

87. var person = {
name: 'Jeff',
greet: function() {
console.log('Now greeting ' + this.name);
setTimeout(function() {
console.log('Hello, ' + this.name + '!');
}.bind(this), 3000);
}
};
ES5:

88. let person = {
name: 'Jeff',
greet: function() {
console.log(`Greeting ${this.name}`);
setTimeout(() => {
console.log(`Hello, ${this.name}!`);
}, 3000);
}
};
ES6:

89. putting it to use

90. compatibility

91. http://kangax.github.io
/compat-table/es6

92. bit.ly/es6-compat

95. $ npm install --save-dev babel-cli
$ npm install --save-dev babel-preset-es2015
$ echo '{ "presets": ["es2015"] }' > .babelrc
$ babel mySource.js -o myTranspiled.js

96. flexibility

97. flexibility

98. babeljs.io/repl

99. not all-or-nothing
N E X T S T E P S

100. es6 is an evolution

101. evolve

102. @ j e f f r e y S t r a u s s
# d e v E S 6
jeff@aranasoft.com