Talk about ECMAScript 6 at YAPC::Asia Tokyo 2015 http://yapcasia.org/2015/talk/show/44721562-10e4-11e5-88a0-d7f07d574c3a https://www.youtube.com/watch?v=oSPv5IPDSxE

1. Effective ES6
@teppeis
YAPC::Asia Tokyo 2015
Aug 21

2. Hello!
• Teppei Sato, @teppeis
• Cybozu, Inc. / kintone
• This is my first and last YAPC :)

3. I created

4. http://cybozushiki.cybozu.co.jp/articles/m000978.html

5. kintone.com

6. MUST BUY!

7. Today talk about:
• Introduce ES6 features
• Deprecated best-practice/patterns
• What’s ES2016, ES2017…
• How to use ES6 from now

8. Background

9. –Brendan Eich
from Effective JavaScript
“My solution to the challenging
requirements and crazy-short schedule
was to make JavaScript extremely
malleable from the start.”
https://www.flickr.com/photos/jsconf/4587502948/

10. –Douglas Crockford
2001, http://www.crockford.com/javascript/javascript.html
“JavaScript: The world’s most
misunderstood programming
language”
https://www.flickr.com/photos/charliebrewer/2897862701/

11. JavaScript has many pitfalls…
• Prototype inheritance (No class)
• new, this
• Function scope (No block scope)
• Global variables (No module system)
• Hoisting
• NaN, undefined
• typeof null
• with, eval

12. Example: No Class
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, I'm " + this.name);
};
var bob = new Person("Bob");
bob.greet();
// "Hello, I'm Bob"
• Use Prototype to emulate Classes

13. If you miss "new", dangerous!
function Person(name) {
this.name = name;
}
// Oh! You forget `new`
var bob = Person("Bob");
console.log(bob); // undefined
// Global leak!!!!!!!!!!
console.log(window.name); // "Bob"

14. We've made best-practices
a.k.a. “work around”

19. Practice: Be sure to call with "new"
function Person(name) {
// check!
if (this instanceof Person) {
return new Person(name);
}
this.name = name;
}
// without `new`
var bob = Person("Bob");
bob.greet();
// "Hello, I'm Bob"

20. ES6!

21. ECMAScript 6
• Published on June 17, 2015
• Formally "ECMAScript 2015"
• 6 years! from ES5

22. ECMAScript 6
• Modern syntax fixing pitfalls
• Better support for large applications
• No (or few) breaking changes

23. For example: ES6 Classes

24. ES6 Classes: Simple!
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log("Hello, I'm " + this.name);
}
}
var bob = new Person("Bob");
bob.greet();
// without `new`
var bob = Person("Bob"); // Error!

25. Classes based on Prototype
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, I'm " + this.name);
};
var bob = new Person("Bob");
bob.greet();
// "Hello, I'm Bob"
OUT OF DATE!

26. Be sure to call with `new`
function Person(name) {
// check!
if (this instanceof Person) {
return new Person(name);
}
this.name = name;
}
// without `new`
var bob = Person("Bob");
bob.greet();
// "Hello, I'm Bob"
OUT OF DATE!

27. New ES6 features deprecates
yesterday’s best-practices
No more altJS!
https://www.flickr.com/photos/jorge-11/2765216505/

28. Can I use ES6 now?

29. ES6 compatibility table
https://kangax.github.io/compat-table/es6/

30. You can use ES6 now!
• Modern browsers and io.js (node.js) support
half of ES6 features.
• Safari 9 (WebKit) will support many ES6 features soon.
• Except for IE11…

31. Transpiler and polyfill
• ES6 Transpiler:
source code converter from ES6 to ES5/ES3
• ES6 Polyfill:
library to provide ES6 built-in classes,
functions and objects for ES5/ES3

32. Babel

33. Babel
• The most compatible (71%) ES6 transpiler
• Integrated with core-js (polyfill library)
• Usage:
• CLI: npm i -g babel
• Browserify: babelify
• REPL on the Web (Try it out!)

34. Babel REPL on the Web

35. ES6 features

36. ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes

37. ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes

38. New syntax
• Arrow Function
• Classes
• Modules
• Block Scope (let/const)
• Extended Object
Literal
• Default Params
• Rest Params
• Spread Operator
• Destructuring
• Iterator
• Generator
• Template Literal
• Tail Call Optimization

39. Arrow Function

40. Prefer arrow function
// ES5 old function
var add = function(a, b) {
return a + b;
};
// ES6 arrow function!
var add = (a, b) => {
return a + b;
};
var add = (a, b) => a + b;
var square = n => n * n;
// good for array filter chains
[1, 2, 3, 4].filter(n => n % 2 === 0).map(n => n * n);

41. Assign “this” to “self”
var john = {
name: "John",
helloLater: function() {
// save `this` as `self`
var self = this;
setTimeout(function() {
// `this` is not available. use `self`.
console.log("Hello, I'm " + self.name);
}, 1000);
}
}
john.helloLater();
// "Hello, I'm John" after 1sec
OUT OF DATE!

42. Arrow function don’t need "self"
let john = {
name: "John",
helloLater: function() {
// use arrow function
setTimeout(() => {
// `this` is available here!
console.log("Hello, I'm " + this.name);
}, 1000);
}
}
john.helloLater();
// "Hello, I'm John" after 1sec

43. Classes

44. ES6 Classes
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log("Hello, I'm " + this.name);
}
}
var bob = new Person("Bob");
bob.greet();

45. Classes based on Prototype
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, I'm " + this.name);
};
var bob = new Person("Bob");
bob.greet();
// "Hello, I'm Bob"
OUT OF DATE!

46. Handmade inheritance function
// handmade function to extend
function __extends(child, parent) {
for (var key in parent) {
if (Object.prototype.hasOwnProperty.call(parent, key)) {
child[key] = parent[key];
}
}
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
};
function Programmer(name, language) {
Person.call(this, name);
this.language = language;
}
__extends(Programmer, Person);
OUT OF DATE!

47. ES6 Class inheritance
class Programmer extends Person {
constructor(name, language) {
super(name);
this.language = language;
}
greet() {
super.greet();
console.log("I like " + this.language);
}
}
var bob = new Programmer("Bob", "JavaScript");
bob.greet();
// "Hello, I'm Bob"
// "I like JavaScript"
• with "extends" and "super"
• can extends built-in classes like "Error"

48. Modules

49. Module pattern
// Global module
var myModule = (function () {
// Module object
var module = {},
privateVariable = "Hello World";
function privateMethod() {
// ...
}
module.publicProperty = "Foobar";
module.publicMethod = function () {
console.log( privateVariable );
};
return module;
})();
OUT OF DATE!

50. CommonJS Modules
// import
var foo = require('foo');
foo();
// export
exports.bar = function() {
console.log('bar');
}
OUT OF DATE!
• node.js/npm friendly
• browserify/webpack to build for browser

51. ES6 Modules
• run anywhere (browsers, node.js…) if ES6 available
• easy to parse statically
• strict mode by default in modules
// export (./module.js)
export var foo = "foo!";
export function bar() {}
export class Baz {
baz() {}
}
// import
import {foo, bar, Baz} from "./module";
console.log(foo); // "foo!"
bar();
new Baz();

52. Write “use strict;”
• Strict mode is useful even in ES6.
• In ES6 Module, always strict mode!
• You don’t have write “use strict;” in ES6 modules.
"use strict";
// Error!
with (obj) {}
// Error!
var obj = {a: 1, a: 1};
OUT OF DATE!

53. Block Scope (let/const)

54. ES5 has only function scope
function foo() {
var num = 1;
// ... too many statements
if (true_condition) {
// same scope! overwrite above `num`!
var num = 2;
// .. some process
}
console.log(num);
// 2 !!!
}

55. Weird hoisting（巻き上げ）
var a = 'outer';
function bar() {
console.log(a);
var a = 'inner';
}
bar();
// undefined !!!

56. Weird hoisting（巻き上げ）
var a = 'outer';
function bar() {
// hoisting!
var a;
console.log(a);
a = 'inner';
}
bar();
// undefined !!!

57. Place “var”s at the top of the scope
• for function scope and hoisting
function init() {
// `var` once at the top of the scope!
var i,
cell,
cells = document.getElementsByTagName('td');
for (i = 0; i < cells.length; i++) {
cell = cells[i];
cell.addEventListener('click', function() {
cell.style.backgroundColor = '#00F';
}, false);
}
}
OUT OF DATE!

58. Use ES6 let or const anytime!
• let and const create block scope
• no hoisting
• no more "var"!
function foo() {
let num = 1;
// ... too many statements
if (true_condition) {
// different scope!
let num = 2;
}
console.log(num);
// 1
}

59. with for-loop
• each iterate creates its own block scope
for (let i = 0; i < 5; i++) {
// new block scope is created for each iteration
setTimeout(() => console.log(i), i * 100);
}
// display "1", "2", "3", "4", "5"

60. const
• immutable value (not immutable object)
• use like Java's final
const foo = 1;
foo = 100; // Error!
const foo = 1000; // Error!
// properties are mutable
const obj = {};
obj.foo = 1; // No error

61. Default Parameters

62. Incorrect default params
function add(a, b) {
// if "a" is 0, 1 is assigned to "a".
a = a || 1;
b = b || 2;
return a + b;
}
add(0, 0); // 1 + 2 = 3
• Incorrect, but occur frequently

63. function add(a, b) {
// correct, but awful..
if (a === undefined) {
a = 1;
}
if (b === undefined) {
b = 2;
}
return a + b;
}
add(0, 0); // 0 + 0 = 0
Handmade default params
comparing to undefined
OUT OF DATE!

64. ES6 Default Parameters
// default value for each param
function add(a = 1, b = 2) {
return a + b;
}
add(); // 1 + 2 = 3
add(0); // 0 + 2 = 2
add(undefined, 0); // 1 + 0 = 1
add(0, 0); // 0 + 0 = 0

65. Rest Parameters

66. Use "arguments" for variable-length
arguments
function foo(first, second) {
console.log("first:", first);
console.log("second:", second);
// arguments is an ArrayLike, not an Array.
var rest = Array.prototype.slice.call(arguments, 2);
console.log("rest:", rest);
}
foo(1, 2, 3, 4, 5);
// first: 1
// second: 2
// rest: [3, 4, 5]
OUT OF DATE!

67. ES6 Rest Params instead of arguments
• You don’t have to use `arguments`
function foo(first, second, ...rest) {
console.log("first:", first);
console.log("second:", second);
console.log("rest:", rest);
}
foo(1, 2, 3, 4, 5);
// first: 1
// second: 2
// rest: [3, 4, 5]

68. Destructuring

69. Destructuring assignment
• Array assignment
let match = /(d{4})(d{2})(d{2})/.exec("20151231");
// match: [2015151231, 2015, 12, 31]
let [, year, month, day] = match;
console.log(year, month, day); // 2015 12 31
// Swapping
[x, y] = [y, x]

70. Destructuring assignment
• Object assignment
let {name: a, age: b} = {name: "Bob", age: 20};
console.log(a, b); // "Bob" 20
// shorthand
let {name, age} = {name: "Bob", age: 20};
console.log(name, age); // "Bob" 20

71. Destructuring assignment
• Function params like "named-params"
• Options object param
function draw(x, y, {width = 320, height = 160} = {}) {
// do the task
}
size(0, 0);
size(0, 0, {});
size(0, 0, {width: 1});
size(0, 0, {height: 2});
size(0, 0, {width: 1, height: 2});

72. Handmade Options object handlingOUT OF DATE!
function draw(x, x, options) {
if (options.width === undefined) {
options.width = 320;
}
if (options.height === undefined) {
options.height = 320;
}
// do the task
}

73. Template Literal

74. Concat with "+" or String#join()
// concat with variables
var name = 'Bob';
var str = "Hello, I'm " + name + ".";
// create multiple lines
var multi = ["line1", "line2", "line3"].join("n");
OUT OF DATE!

75. Template Literal
// interpolation
var name = 'Bob';
var str = `Hello, I'm ${name}.`;
// multiple lines
var multi =
`line1
line2
line3`;
• back-quoted string

76. Extended Object Literal

77. Extended object literal for shorthand
let foo = 1;
let bar = 2;
// shorthand
let obj = {foo, bar};
// same as: {foo: foo, bar: bar};
let prefix = 'foo';
let obj = {
// computed property
[prefix + 'abc']: 1,
// method definition without "function" keyword
foo() {
console.log('foo!');
}
};

78. and…
• Iterator
• Spread Operator
• Generator
• Tail Call Optimization
78

79. ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes

80. New built-in classes and objects
• Promise
• Map
• Set
• WeakMap/WeakSet
• TypedArray
• Symbol
• Proxy/Reflect

81. Promise

82. Callback args for async API
function asyncTask(a, b, callback) {
// ...some async task
if (error) {
callback(error);
} else {
callback(null, result);
}
}
asyncTask(1, 2, function(error, result) {
if (error) {
// ...error handling
}
console.log(result);
});
OUT OF DATE!

83. Callback args for async API
asyncTask1(function(error, result) {
if (error) {
// ...error handling
}
asyncTask2(function(error, result) {
if (error) {
// ...error handling
}
asyncTask3(function(error, result) {
if (error) {
// ...error handling
}
});
});
});
OUT OF DATE!

84. ES6 Promise
function asyncTask(a, b, callback) {
// ...some async task
return new Promise((resolve, reject) => {
if (error) {
reject(error);
} else {
resolve(result);
}
});
}
asyncTask(1, 2).then(result => {
console.log(result);
}).catch(error => {
// ...error handling
});

85. ES6 Promise
// series
asyncTask1().then(result => {
return asyncTask2();
}).then(result => {
return asyncTask3();
}).catch(error => {
// ...error handling
});

86. ES6 Promise
// parallel
Promise.all([
asyncTask1(),
asyncTask2(),
asyncTask3()
]).then(results => {
console.log(results[0]);
// result of asyncTask1
});

87. Map/Set

88. Use Object as a dictionary
// some keys are dangerous
var obj = {};
var key = "toString";
obj[key] = "value1";
String(obj);
// TypeError: can't convert obj to string
OUT OF DATE!
• some special keys are dangerous

89. Use Object as a dictionary
// cannot use object as a key
var key1 = {name: "key1"};
var key2 = {name: "key2"};
obj[key1] = "value1";
obj[key2] = "value2";
console.log(obj[key1]);
// "value2"
console.log(Object.keys(obj));
// ["[object Object]"]
OUT OF DATE!
• cannot use an object as a key

90. ES6 Map
// no dangerous keys
let map = new Map();
map.set("toString", "value1");
map.get("toString"); // "value1"
String(map); // "[object Map]"
// object as a key
let key1 = {};
let key2 = {};
let m = new Map();
m.set(key1, "v1");
m.set(key2, "v2");
m.get(key1); // "v1"

91. ES6 Set
let set = new Set();
set.add("value1");
console.log(set.size); // 1
// unique
set.add("value1");
console.log(set.size); // 1
• not easy to implement Set in ES5

92. and…
• WeakMap/WeakSet
• TypedArray
• Symbol
• Proxy/Reflect

93. ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes

94. Improvement of existing classes
• String
• RegExp
• Array
• Object
• Math
• Number

95. Object

96. Object.assign
var target = {a: 1, b: 2};
var s1 = {b: 3, c: 4};
var s2 = {c: 5, d: 6};
var ret = Object.assign(target, s1, s2);
console.log(target); // {a: 1, b: 3, c: 5, d: 6}
• no more $.extend() !

97. String

98. Unicode surrogate pair support
• 野家 valid
"𠮷野家".codePointAt(0).toString(16); // "20BB7"
String.fromCodePoint(0x20BB7); // "𠮷"

99. New pitfalls

100. What's happen?
if (a => 1) {
// ...
}

101. Oh! Arrow function!
// expected
if (a >= 1) {
}
// arrow function! confusing..
if (a => 1) {
}
// clear
if ((a) => 1) {
}

102. ESLint

104. ES.next = ES2016?

105. The TC39 Process: Annual
• TC39 committee approves acceptance for each stage.
Stage 0: Strawman (idea)
Stage 1: Proposal (problem, solution and demo/polyfill)
Stage 2: Draft (initial spec)
Stage 3: Candidate (review and feedback)
Stage 4: Finished (two implementations at least)
• Stage 4 features are published as ES201X
on July every year.

107. Stage 3: Candidate

108. Exponentiation Operator
// x ** y
let squared = 2 ** 2;
// same as: 2 * 2
let cubed = 2 ** 3;
// same as: 2 * 2 * 2
// x **= y
let a = 2;
a **= 2;
// same as: a = a * a;

109. Array.prototype.includes(str, pos)
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
["a", "b", "c"].includes("a", 0); // true
["a", "b", "c"].includes("a", 1); // false

110. Stage 2: Draft

111. Object.observe(obj, observer)
let records;
function observer(recs) {
records = recs;
}
let obj = {id: 1};
Object.observe(obj, observer);
obj.a = 'b';
obj.id++;
Object.deliverChangeRecords(observer);
assertChangesAre(records, [
{object: obj, type: 'add', name: 'a'},
{object: obj, type: 'update', name: 'id', oldValue: 1}
]);

112. Async/await
async function chainAnimationsAsync(elem, animations) {
let ret = null;
try {
for (let anim of animations) {
ret = await anim(elem);
}
} catch(e) { /* ignore */ }
return ret;
}

113. SIMD
let a = SIMD.Float32x4(1.0, 2.0, 3.0, 4.0);
let b = SIMD.Float32x4(5.0, 10.0, 15.0, 20.0);
let c = SIMD.Float32x4.add(a,b);
// c: (6.0, 12.0, 18.0, 24.0)
• Single Instruction Multiple Data
• Vector data calculation

114. How can I get along with
ES6 and ES.next?

115. May the Babel be with you!
• It's too far for all browsers to support ES6.
• IE11 will live until Jun 10, 2023…
• You will be able to stop transpiling features
that browsers support natively.
• Also ES201X features are available via Babel.

116. Design your policy:
Which ES6 features do you use?
• Which browsers/node.js do you support?
• If you need IE8 (ES3), it's not easy to use ES6…
• Which feature is effective for your project?
• Is the feature easy to transpile/polyfill?

117. Easy to transpile/polyfill?
• No problem
Arrow function, let/const, Extended Object literal, Classes
Extended function params, Template literal, Map/Set, Promise…
• Be careful/Partial
Module, Generator, Symbol
• Hard/Impossible
WeakMap/Set, Proxy, Reflect, Tail Call Optimization

118. Customize Babel config
• Specify TC39 Stage (default: Stage 2)
• Specify your blacklist features
// .babelrc
{
"stage": 3,
"blacklist": [
"es6.tailCall",
"regenerator"
]
}

119. Conclusion

120. Conclusion
• ES6 is awesome!
• Some best-practices are deprecated.
• Try ES6 with Babel from now!

121. MUST BUY!

122. Thanks!