FITC events. For digital creators. Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca An Intro To ES6 with Grant Skinner OVERVIEW ECMAScript 6 is the approved and published standard for the next version of JavaScript. It offers new syntax and language features that provide new ways of tackling coding problems, and increase your productivity. This session will introduce ES6 and delve into many of the new features of the language. It will also cover real-world use, including transpilers, runtimes, and browser support. OBJECTIVE Create confidence in evaluating and getting started using ES6. TARGET AUDIENCE JavaScript developers. ASSUMED AUDIENCE KNOWLEDGE JavaScript. FOUR THINGS AUDIENCE MEMBERS WILL LEARN Status of ES6 How to get started with ES6 ES6 feature overview Practical considerations for adopting ES6

1. ES6: An Intro

2. Grant Skinner
gskinner.com
@gskinner

3. This Talk:
- brief intro to ES6
- getting started / workflow
- glance at some new features
- a whole lotta code
- maybe some Q&A if I’m fast

4. what is ES6?

5. ECMA-262 Edition 6

6. ECMAScript 6

7. ECMAScript 2015

8. JavaScript Next

9. 1995 Mocha / LiveScript Prototype

10. 1996 JavaScript in Netscape Navigator

11. 1997 ECMA-262 "ECMAScript"

12. 1998 V2: editorial

13. 1999 V3: regex, try/catch

14. 1999 </progress>

15. 2003 V4: drama, mothballed

16. 2008 V4v2: drama, incinerated

17. 2009 V3.1: strict, json, reflection
5

18. 2015 V6: biggest JS update ever!

19. designed by committees of committees

20. backwards (in)compatibility

21. compromise

22. a heap of syntactic sugar

23. a dollop of architectural features

24. a sprinkling of new functionality

25. getting started

26. ES6 is a superset of ES5
learn / apply progressively

27. dependent on broad support by
deployment environments

28. from: http://kangax.github.io/compat-table/es6/

33. transpilers

34. convert code from one language to another
(es6 —> es5)

36. abstracts production code vs deployed code
(source maps help)

37. introduce additional setup complexity & time
(minor, but noticeable)

38. cannot transpile genuinely new features
(weak maps, symbols, etc)

39. the best of both worlds with gulp / grunt
(write now, deploy later)

40. DEMO
target

41. gulp workflow:
github.com/gskinner/es6gulp

42. JSFiddle.net

43. some easy ones

44. let + const
target

45. var a = "outer";
let b = "outer";
if (true) {
var a = "block";
let b = "block";
}
console.log(a); // "block"
console.log(b); // "outer"

46. let b = "outer";
if (true) {
console.log(b); // "outer"
}

47. console.log(a); // undefined
var a = "foo";
console.log(b); // error! not defined
let b = "bar";

48. // activation objects:
for (var i=0; i<9; i++) {
let j=i;
setTimeout(function() {
console.log(i, j);
}, i);
}
// 9,0
// 9,1
// 9,2 etc.

49. const RED = "red";
RED = "green"; // fails silently!
console.log(RED); // "red"
const RED = "blue"; // error! already defined

50. string templates

51. var str = "template";
var tstr = `${str} ${typeof str}s rock!`;
// "template strings rock!"

52. var foo = `hello there ${name}.
Welcome to ${getLocation()},
we hope you enjoy your stay!`;

53. var foo = `hello there ${name}.
Welcome to ${getLocation()},
we hope you enjoy your stay!`;

54. class Foo {
function bar() {
var foo = `hello there ${name}.
Welcome to ${getLocation()},
we hope you enjoy your stay!`;
}
}

55. var _ = "n";
var foo =
`hello there ${name}.${_
}Welcome to ${getLocation()},${_
}we hope you enjoy your stay!`;

56. function dedent(str) {
var lines = str.split("n");
var indent = lines[1].match(/^s+/);
if (!indent) { return str; }
var r = new RegExp("^"+indent);
lines.forEach((v,i,a)=>a[i]=v.replace(r,""));
return lines.join("n");
}
var foo = dedent(`hello there ${name}.
Welcome to ${getLocation()},
we hope you enjoy your stay!`);

57. /*
SEE ALSO:
- improved unicode support
- regexp y & u flags
- octal & binary literals
*/

58. functions

59. arrow functions

60. function(a, b) {
return a + b;
}
// es6:
(a, b) => {
return a + b;
}

61. 1. less typing

62. function(a, b) {
return a + b;
}
// es6:
(a, b) => {
return a + b;
}

63. function(a, b) {
return a + b;
}
// es6:
(a, b) => a + b;

64. r => pi*r*r;

65. () => Math.random()*360;

66. (a,d) => ({x:Math.cos(a)*d, y:Math.sin(a)*d});

67. arr.sort((a,b) => a-b);

68. oldFolk = folk.filter(o => o.age > 35);

69. myDiv.onclick = evt => console.log(evt.clientX);

70. 2. lexical scoping

71. var _this = this;
setInterval(function() { _this.seconds++ }, 1000);
// es6:
setInterval(()=>this.seconds++;, 1000);

72. this.uiPanel.upBtn.onclick = ()=>this.rocket.y--;

73. default params

74. function sum(a, b) {
if (b == null) { b = 0; }
return a+b;
}
// es6:
function sum(a, b=0) {
return a+b;
}

75. function test(a, b=1, c=2) {
console.log(a, b, c);
}
test(20, undefined, 5); // "20, 1, 5"

76. function scale(scaleX=1, scaleY=scaleX) {
// etc.
}
function rotate(angle=Math.random()*360) {
// etc.
}
function translate(x=this.tx, y=this.ty) {
// etc.
}

77. rest

78. sum(2, 5, 9, 17);
// es5:
function sum(num) {
for (var i=arguments.length-1; i>=1; i--) {
num += arguments[i];
}
return num;
}
// es6:
function sum(...nums) {
return nums.reduce((a,b)=>a+b);
}

79. function.name

80. function foo() {}
foo.name; // "foo"
var bar = function() {}
bar.name; // "bar"
let baz;
baz = ()=>{};
baz.name; // "baz"

81. spread

82. var neutralNames = ["kelly", "jordan"]
var boyNames = ["thor", "grant", ...neutralNames];
var girlNames = ["sarah", ...neutralNames, "sue"];

83. var list = ["john", "jane"]
inject(nameList, 1, "bob", "sue");
function inject(list, index, ...items) {
list.splice(index, 0, ...items);
}

84. destructuring

85. function polarToXY(a, d) {
a *= Math.PI/180;
return [Math.cos(a)*d, Math.sin(a)*d];
}
var [x,y] = polarToXY(30,100);
console.log(x,y); // 86, 49
var [,y] = polarToXY(30,100);
console.log(y); // 49

86. function polarToXY(a, d) {
a *= Math.PI/180;
return {x: Math.cos(a)*d, y: Math.sin(a)*d};
}
var {x,y} = polarToXY(30,100);
console.log(x,y); // 86, 49
var {x:x1, y:y1} = polarToXY(30,100);
console.log(x1,y1); // 86, 49

87. let {name, email, phone="n/a"} = getUser(id);

88. var a=1, b=2;
[a,b] = [b,a] // swap values!
console.log(a,b); // 2, 1

89. object literals

90. const PROP_NAME = "foo";
var position = 20;
var obj = {
__proto__: new Bar(),
position, // position:position
advance(delta=0) {
this.position += delta;
},
[PROP_NAME]: 20
};

91. classes

92. class Circle extends Shape {
constructor(color, x=0, y=0, radius=Circle.DEF_RADIUS) {
x = Math.round(x);
super(color, x, y);
this.radius = radius;
}
draw() {
// … draw circle …
super.fill();
}
get area() { return Circle.getArea(this.radius);}
static getArea(radius) { return Math.PI*radius*radius; }
}
Circle.DEF_RADIUS = 10;
YAY!

93. /*
SEE ALSO:
- modules (module loader)
- generator methods
- promises
- new.target
*/

94. one more

95. if we have time?

96. maps

97. this.user = new User("Scrooge", "McDuck");
// ...
netData = new Map();
netData.set(user, {NETDATA});
// ...
netData.get(user); // NETDATA

98. this.user = new User("Scrooge", "McDuck");
// ...
netData = new Map();
netData.set(user, {NETDATA});
// ...
netData.get(user); // NETDATA

99. weak maps

100. this.user = new User("Scrooge", "McDuck");
// ...
netData = new WeakMap();
netData.set(user, {NETDATA});
// ...
netData.get(user); // NETDATA

101. this.user = new User("Scrooge", "McDuck");
// ...
netData = new WeakMap();
netData.set(user, {NETDATA});
// ...
netData.get(user); // NETDATA

102. /*
SEE ALSO:
- Set & WeakSet
- Symbol
- Proxy
*/

103. /*
MISSED ANYTHING?
- reflect APIs
- for…of & iterators
- tail call optimizations
- typed arrays
- function.name
- new String, Math, Object, Number, Array APIs
- subclassable built-ins
*/

104. in summary

105. ES6 is here, and you should learn it.
You can learn and apply it iteratively.
Use a transpiler for client-side code.
Most features are syntactic sugar, but still nice.
Use them responsibly!
A few new bits too, but wait to use them.

106. we’re done!

107. thanks!
@gskinner
// resources:
kangax.github.io/compat-table/es6/
2ality.com/2015/02/es6-classes-final.html
babeljs.io/docs/learn-es2015/
developer.mozilla.org/en-US/docs/Web/JavaScript
github.com/gskinner/es6gulp
jsfiddle.net