Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Effective ES6
@teppeis
YAPC::Asia Tokyo 2015
Aug 21
Hello!
• Teppei Sato, @teppeis
• Cybozu, Inc. / kintone
• This is my first and last YAPC :)
I created
http://cybozushiki.cybozu.co.jp/articles/m000978.html
kintone.com
MUST BUY!
Today talk about:
• Introduce ES6 features
• Deprecated best-practice/patterns
• What’s ES2016, ES2017…
• How to use ES6 f...
Background
–Brendan Eich
from Effective JavaScript
“My solution to the challenging
requirements and crazy-short schedule
was to make ...
–Douglas Crockford
2001, http://www.crockford.com/javascript/javascript.html
“JavaScript: The world’s most
misunderstood p...
JavaScript has many pitfalls…
• Prototype inheritance (No class)
• new, this
• Function scope (No block scope)
• Global va...
Example: No Class
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, I'...
If you miss "new", dangerous!
function Person(name) {
this.name = name;
}
// Oh! You forget `new`
var bob = Person("Bob");...
We've made best-practices
a.k.a. “work around”
Practice: Be sure to call with "new"
function Person(name) {
// check!
if (this instanceof Person) {
return new Person(nam...
ES6!
ECMAScript 6
• Published on June 17, 2015
• Formally "ECMAScript 2015"
• 6 years! from ES5
ECMAScript 6
• Modern syntax fixing pitfalls
• Better support for large applications
• No (or few) breaking changes
For example: ES6 Classes
ES6 Classes: Simple!
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log("Hello, I'm " + this.nam...
Classes based on Prototype
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("...
Be sure to call with `new`
function Person(name) {
// check!
if (this instanceof Person) {
return new Person(name);
}
this...
New ES6 features deprecates
yesterday’s best-practices
No more altJS!
https://www.flickr.com/photos/jorge-11/2765216505/
Can I use ES6 now?
ES6 compatibility table
https://kangax.github.io/compat-table/es6/
You can use ES6 now!
• Modern browsers and io.js (node.js) support 

half of ES6 features.
• Safari 9 (WebKit) will suppor...
Transpiler and polyfill
• ES6 Transpiler:

source code converter from ES6 to ES5/ES3
• ES6 Polyfill:

library to provide ES6...
Babel
Babel
• The most compatible (71%) ES6 transpiler
• Integrated with core-js (polyfill library)
• Usage:
• CLI: npm i -g babe...
Babel REPL on the Web
ES6 features
ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes
ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes
New syntax
• Arrow Function
• Classes
• Modules
• Block Scope (let/const)
• Extended Object
Literal
• Default Params
• Res...
Arrow Function
Prefer arrow function
// ES5 old function
var add = function(a, b) {
return a + b;
};
// ES6 arrow function!
var add = (a,...
Assign “this” to “self”
var john = {
name: "John",
helloLater: function() {
// save `this` as `self`
var self = this;
setT...
Arrow function don’t need "self"
let john = {
name: "John",
helloLater: function() {
// use arrow function
setTimeout(() =...
Classes
ES6 Classes
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log("Hello, I'm " + this.name);
}
}
v...
Classes based on Prototype
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("...
Handmade inheritance function
// handmade function to extend
function __extends(child, parent) {
for (var key in parent) {...
ES6 Class inheritance
class Programmer extends Person {
constructor(name, language) {
super(name);
this.language = languag...
Modules
Module pattern
// Global module
var myModule = (function () {
// Module object
var module = {},
privateVariable = "Hello W...
CommonJS Modules
// import
var foo = require('foo');
foo();
// export
exports.bar = function() {
console.log('bar');
}
OUT...
ES6 Modules
• run anywhere (browsers, node.js…) if ES6 available
• easy to parse statically
• strict mode by default in mo...
Write “use strict;”
• Strict mode is useful even in ES6.
• In ES6 Module, always strict mode!
• You don’t have write “use ...
Block Scope (let/const)
ES5 has only function scope
function foo() {
var num = 1;
// ... too many statements
if (true_condition) {
// same scope! ...
Weird hoisting(巻き上げ)
var a = 'outer';
function bar() {
console.log(a);
var a = 'inner';
}
bar();
// undefined !!!
Weird hoisting(巻き上げ)
var a = 'outer';
function bar() {
// hoisting!
var a;
console.log(a);
a = 'inner';
}
bar();
// undefi...
Place “var”s at the top of the scope
• for function scope and hoisting
function init() {
// `var` once at the top of the s...
Use ES6 let or const anytime!
• let and const create block scope
• no hoisting
• no more "var"!
function foo() {
let num =...
with for-loop
• each iterate creates its own block scope
for (let i = 0; i < 5; i++) {
// new block scope is created for e...
const
• immutable value (not immutable object)
• use like Java's final
const foo = 1;
foo = 100; // Error!
const foo = 1000...
Default Parameters
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;
...
function add(a, b) {
// correct, but awful..
if (a === undefined) {
a = 1;
}
if (b === undefined) {
b = 2;
}
return a + b;...
ES6 Default Parameters
// default value for each param
function add(a = 1, b = 2) {
return a + b;
}
add(); // 1 + 2 = 3
ad...
Rest Parameters
Use "arguments" for variable-length
arguments
function foo(first, second) {
console.log("first:", first);
console.log("sec...
ES6 Rest Params instead of arguments
• You don’t have to use `arguments`
function foo(first, second, ...rest) {
console.lo...
Destructuring
Destructuring assignment
• Array assignment
let match = /(d{4})(d{2})(d{2})/.exec("20151231");
// match: [2015151231, 2015...
Destructuring assignment
• Object assignment
let {name: a, age: b} = {name: "Bob", age: 20};
console.log(a, b); // "Bob" 2...
Destructuring assignment
• Function params like "named-params"
• Options object param
function draw(x, y, {width = 320, he...
Handmade Options object handlingOUT OF DATE!
function draw(x, x, options) {
if (options.width === undefined) {
options.wid...
Template Literal
Concat with "+" or String#join()
// concat with variables
var name = 'Bob';
var str = "Hello, I'm " + name + ".";
// creat...
Template Literal
// interpolation
var name = 'Bob';
var str = `Hello, I'm ${name}.`;
// multiple lines
var multi =
`line1
...
Extended Object Literal
Extended object literal for shorthand
let foo = 1;
let bar = 2;
// shorthand
let obj = {foo, bar};
// same as: {foo: foo, ...
and…
• Iterator
• Spread Operator
• Generator
• Tail Call Optimization
78
ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes
New built-in classes and objects
• Promise
• Map
• Set
• WeakMap/WeakSet
• TypedArray
• Symbol
• Proxy/Reflect
Promise
Callback args for async API
function asyncTask(a, b, callback) {
// ...some async task
if (error) {
callback(error);
} els...
Callback args for async API
asyncTask1(function(error, result) {
if (error) {
// ...error handling
}
asyncTask2(function(e...
ES6 Promise
function asyncTask(a, b, callback) {
// ...some async task
return new Promise((resolve, reject) => {
if (error...
ES6 Promise
// series
asyncTask1().then(result => {
return asyncTask2();
}).then(result => {
return asyncTask3();
}).catch...
ES6 Promise
// parallel
Promise.all([
asyncTask1(),
asyncTask2(),
asyncTask3()
]).then(results => {
console.log(results[0]...
Map/Set
Use Object as a dictionary
// some keys are dangerous
var obj = {};
var key = "toString";
obj[key] = "value1";
String(obj)...
Use Object as a dictionary
// cannot use object as a key
var key1 = {name: "key1"};
var key2 = {name: "key2"};
obj[key1] =...
ES6 Map
// no dangerous keys
let map = new Map();
map.set("toString", "value1");
map.get("toString"); // "value1"
String(m...
ES6 Set
let set = new Set();
set.add("value1");
console.log(set.size); // 1
// unique
set.add("value1");
console.log(set.s...
and…
• WeakMap/WeakSet
• TypedArray
• Symbol
• Proxy/Reflect
ES6 features
• New syntax
• New built-in classes and objects
• Improvement of existing classes
Improvement of existing classes
• String
• RegExp
• Array
• Object
• Math
• Number
Object
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,...
String
Unicode surrogate pair support
• 野家 valid
"𠮷野家".codePointAt(0).toString(16); // "20BB7"
String.fromCodePoint(0x20BB7); // ...
New pitfalls
What's happen?
if (a => 1) {
// ...
}
Oh! Arrow function!
// expected
if (a >= 1) {
}
// arrow function! confusing..
if (a => 1) {
}
// clear
if ((a) => 1) {
}
ESLint
ES.next = ES2016?
The TC39 Process: Annual
• TC39 committee approves acceptance for each stage.
Stage 0: Strawman (idea)
Stage 1: Proposal (...
Stage 3: Candidate
Exponentiation Operator
// x ** y
let squared = 2 ** 2;
// same as: 2 * 2
let cubed = 2 ** 3;
// same as: 2 * 2 * 2
// x *...
Array.prototype.includes(str, pos)
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN...
Stage 2: Draft
Object.observe(obj, observer)
let records;
function observer(recs) {
records = recs;
}
let obj = {id: 1};
Object.observe(o...
Async/await
async function chainAnimationsAsync(elem, animations) {
let ret = null;
try {
for (let anim of animations) {
r...
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...
How can I get along with
ES6 and ES.next?
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...
Design your policy:
Which ES6 features do you use?
• Which browsers/node.js do you support?
• If you need IE8 (ES3), it's ...
Easy to transpile/polyfill?
• No problem
Arrow function, let/const, Extended Object literal, Classes

Extended function par...
Customize Babel config
• Specify TC39 Stage (default: Stage 2)
• Specify your blacklist features
// .babelrc
{
"stage": 3,
...
Conclusion
Conclusion
• ES6 is awesome!
• Some best-practices are deprecated.
• Try ES6 with Babel from now!
MUST BUY!
Thanks!
Effective ES6
Effective ES6
Effective ES6
Effective ES6
Effective ES6
Effective ES6
Upcoming SlideShare
Loading in …5
×

Effective ES6

48,400 views

Published on

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

Published in: Technology

Effective ES6

  1. 1. Effective ES6 @teppeis YAPC::Asia Tokyo 2015 Aug 21
  2. 2. Hello! • Teppei Sato, @teppeis • Cybozu, Inc. / kintone • This is my first and last YAPC :)
  3. 3. I created
  4. 4. http://cybozushiki.cybozu.co.jp/articles/m000978.html
  5. 5. kintone.com
  6. 6. MUST BUY!
  7. 7. Today talk about: • Introduce ES6 features • Deprecated best-practice/patterns • What’s ES2016, ES2017… • How to use ES6 from now
  8. 8. Background
  9. 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. 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. 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. 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. 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. 14. We've made best-practices a.k.a. “work around”
  15. 15. 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"
  16. 16. ES6!
  17. 17. ECMAScript 6 • Published on June 17, 2015 • Formally "ECMAScript 2015" • 6 years! from ES5
  18. 18. ECMAScript 6 • Modern syntax fixing pitfalls • Better support for large applications • No (or few) breaking changes
  19. 19. For example: ES6 Classes
  20. 20. 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!
  21. 21. 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!
  22. 22. 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!
  23. 23. New ES6 features deprecates yesterday’s best-practices No more altJS! https://www.flickr.com/photos/jorge-11/2765216505/
  24. 24. Can I use ES6 now?
  25. 25. ES6 compatibility table https://kangax.github.io/compat-table/es6/
  26. 26. 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…
  27. 27. 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
  28. 28. Babel
  29. 29. 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!)
  30. 30. Babel REPL on the Web
  31. 31. ES6 features
  32. 32. ES6 features • New syntax • New built-in classes and objects • Improvement of existing classes
  33. 33. ES6 features • New syntax • New built-in classes and objects • Improvement of existing classes
  34. 34. 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
  35. 35. Arrow Function
  36. 36. 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);
  37. 37. 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!
  38. 38. 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
  39. 39. Classes
  40. 40. ES6 Classes class Person { constructor(name) { this.name = name; } greet() { console.log("Hello, I'm " + this.name); } } var bob = new Person("Bob"); bob.greet();
  41. 41. 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!
  42. 42. 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!
  43. 43. 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"
  44. 44. Modules
  45. 45. 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!
  46. 46. 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
  47. 47. 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();
  48. 48. 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!
  49. 49. Block Scope (let/const)
  50. 50. 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 !!! }
  51. 51. Weird hoisting(巻き上げ) var a = 'outer'; function bar() { console.log(a); var a = 'inner'; } bar(); // undefined !!!
  52. 52. Weird hoisting(巻き上げ) var a = 'outer'; function bar() { // hoisting! var a; console.log(a); a = 'inner'; } bar(); // undefined !!!
  53. 53. 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!
  54. 54. 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 }
  55. 55. 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"
  56. 56. 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
  57. 57. Default Parameters
  58. 58. 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
  59. 59. 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!
  60. 60. 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
  61. 61. Rest Parameters
  62. 62. 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!
  63. 63. 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]
  64. 64. Destructuring
  65. 65. 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]
  66. 66. 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
  67. 67. 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});
  68. 68. 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 }
  69. 69. Template Literal
  70. 70. 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!
  71. 71. Template Literal // interpolation var name = 'Bob'; var str = `Hello, I'm ${name}.`; // multiple lines var multi = `line1 line2 line3`; • back-quoted string
  72. 72. Extended Object Literal
  73. 73. 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!'); } };
  74. 74. and… • Iterator • Spread Operator • Generator • Tail Call Optimization 78
  75. 75. ES6 features • New syntax • New built-in classes and objects • Improvement of existing classes
  76. 76. New built-in classes and objects • Promise • Map • Set • WeakMap/WeakSet • TypedArray • Symbol • Proxy/Reflect
  77. 77. Promise
  78. 78. 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!
  79. 79. 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!
  80. 80. 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 });
  81. 81. ES6 Promise // series asyncTask1().then(result => { return asyncTask2(); }).then(result => { return asyncTask3(); }).catch(error => { // ...error handling });
  82. 82. ES6 Promise // parallel Promise.all([ asyncTask1(), asyncTask2(), asyncTask3() ]).then(results => { console.log(results[0]); // result of asyncTask1 });
  83. 83. Map/Set
  84. 84. 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
  85. 85. 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
  86. 86. 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"
  87. 87. 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
  88. 88. and… • WeakMap/WeakSet • TypedArray • Symbol • Proxy/Reflect
  89. 89. ES6 features • New syntax • New built-in classes and objects • Improvement of existing classes
  90. 90. Improvement of existing classes • String • RegExp • Array • Object • Math • Number
  91. 91. Object
  92. 92. 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() !
  93. 93. String
  94. 94. Unicode surrogate pair support • 野家 valid "𠮷野家".codePointAt(0).toString(16); // "20BB7" String.fromCodePoint(0x20BB7); // "𠮷"
  95. 95. New pitfalls
  96. 96. What's happen? if (a => 1) { // ... }
  97. 97. Oh! Arrow function! // expected if (a >= 1) { } // arrow function! confusing.. if (a => 1) { } // clear if ((a) => 1) { }
  98. 98. ESLint
  99. 99. ES.next = ES2016?
  100. 100. 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.
  101. 101. Stage 3: Candidate
  102. 102. 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;
  103. 103. 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
  104. 104. Stage 2: Draft
  105. 105. 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} ]);
  106. 106. 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; }
  107. 107. 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
  108. 108. How can I get along with ES6 and ES.next?
  109. 109. 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.
  110. 110. 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?
  111. 111. 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
  112. 112. Customize Babel config • Specify TC39 Stage (default: Stage 2) • Specify your blacklist features // .babelrc { "stage": 3, "blacklist": [ "es6.tailCall", "regenerator" ] }
  113. 113. Conclusion
  114. 114. Conclusion • ES6 is awesome! • Some best-practices are deprecated. • Try ES6 with Babel from now!
  115. 115. MUST BUY!
  116. 116. Thanks!

×