Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
EcmaScript 6 - the future is here
Search
Sebastiano Armeli
May 16, 2014
Programming
5
7.1k
EcmaScript 6 - the future is here
Talk given at JsDay (Verona, Italy) - May 2014
Sebastiano Armeli
May 16, 2014
Tweet
Share
More Decks by Sebastiano Armeli
See All by Sebastiano Armeli
Cultivate Excellence In Engineering Teams through Continuous Software Engineering
sebarmeli
1
120
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
120
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
250
Managing a software engineering team
sebarmeli
1
550
Enforcing coding standards in a JS project
sebarmeli
0
570
Enforcing Coding Standards
sebarmeli
1
110
ES6: The future is now
sebarmeli
2
470
Dependency management and Package management in JavaScript
sebarmeli
0
700
Karma - JS Test Runner
sebarmeli
1
820
Other Decks in Programming
See All in Programming
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
920
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
17
4k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
970
CloudNativePGを布教したい
nnaka2992
0
110
Formの複雑さに立ち向かう
bmthd
1
930
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
Learning Kotlin with detekt
inouehi
1
130
コードを読んで理解するko build
bells17
1
110
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
810
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
RailsConf 2023
tenderlove
29
1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Producing Creativity
orderedlist
PRO
344
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Music & Morning Musume
bryan
46
6.4k
The Pragmatic Product Professional
lauravandoore
32
6.4k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Transcript
Sebastiano Armeli @sebarmeli http://courtreportingnyc.com/wp-content/uploads/2013/10/future-of-court-reporting.jpg
@sebarmeli Sebastiano Armeli
ES6
History 1995 1996 1997 1998 1999 2000 2003 (May) B.
Eich invented Mocha (Dec) LiveScript renamed to JavaScript JSScript (June) ECMA-262 Ed.1! ! by TC39 committee ECMA-262 Ed.2 ECMA-262 Ed.3 ECMA-262 Ed.4 started ECMA-262 Ed.4 abandoned (Sep) Mocha renamed to LiveScript
History 2005 2007 2008 2009 2011 2013 2014 ES 4
again! (Adobe, Mozilla,! Google)! ES 3.1 ! (Microsoft, Yahoo)! beginning ES 5 spec finalized (June) ECMA-262 Ed.5 (June) ES 6 proposals freeze (Dec) ECMA-262 Ed.6 target release (27th April) latest spec draft (July) Agreement: ES3.1 & ES-Harmony! ! ES3.1 becomes ES5
ECMA-262 TC39 ES 4 ES-Harmony ES.Next ES 6 ECMA ES
7 es-discuss
ES-Harmony Proposal ES 6 Candidate ECMA-262 Ed.6 standardized ES 6
Specification Draft TC39 Process Strawman Proposal
Generators & Iteration Summary Functions Collections Modularity Scoping / Calling
API improvements Proxies
Generators & Iteration Summary Functions Collections Modularity Scoping / Calling
API improvements Proxies
(Fat) arrow function var y = (x) => x +
1 var y = function(x) { return x + 1; } ES6 ES5
(Fat) arrow function var y = (x) => x +
1 var y = function(x) { return x + 1; } ES6 ES5 No constructor Syntax sugar Lexical `this` binding
(Fat) arrow function var y = (x) => x +
1 var y = function(x) { return x + 1; } ES6 ES5 No constructor Syntax sugar Lexical `this` binding
(Fat) arrow function var y = (x) => x +
1 var y = function(x) { return x + 1; } ES6 ES5 No constructor Syntax sugar Lexical `this` binding
let x = (x) => {return x + 1} var
x = function(x) { return x + 1; } let x = (x, y) => ({ x: x, y: y }) var x = function(x, y) { return { x: x, y: y }; } ES6 ES5
let map = words => words.map((w) => w.length); var map
= function(words) { return words.map(function(w) { return w.length; } } ES6 ES5 map([‘sea’, ‘beach’, ‘do’]); // [3,5,2]
var obj = { doIt: function(){}, handle: function(){ document.addEventListener(‘click’, function(e)
{ this.doIt(); }.bind(this)); } } ES5 var obj = { doIt: function(){}, handle: function(){ var that = this; document.addEventListener(‘click’, function(e) { that.doIt(); }); } } ES3
var obj = { doIt: function(){}, handle: function(){ document.addEventListener(‘click’, (e)
=> this.doIt()); } } ES6
Object.getPrototypeOf(() => {})
Object.getPrototypeOf(() => {}) Function.prototype
When to use ‘function’ ?
Constructors Generators Methods in obj
Generators & Iteration Summary Functions Collections Modularity Scoping & Calling
API improvements Proxies
Block Scoping Each BLOCK has got its lexical environment let/const
bind variables to the lexical environment Variables declared with let/const are NOT hoisted
var vs let (function() { console.log(y) // “undefined” if (true)
{ var y = “value”; } console.log(y) // “value” }());
var vs let (function() { if (true) { let y
= “value”; } console.log(y) // ERROR!! }()); (function() { console.log(y) // “undefined” if (true) { var y = “value”; } console.log(y) // “value” }());
const (function() { const X; X = “foo”; // ERROR:
x unitialized }()); (function() { const X = “foo”; X = “foo2”; // ERROR: x is read-only }());
Block functions if (true) { function fn () {} }
! fn(); // ERROR!
Destructing array var [x,y] = [‘a’, ‘b’]; ! console.log(x); //
‘a’ ! console.log(y); // ‘b’ ! ! var [x,y] = [y, x]; ! console.log(x); // ‘b’
Destructing object var obj = {width: 50, height: 100}; !
var {width, height} = obj; ! console.log(width); // 50
Destructing multiple return value var fn = function(){ return [“50”,
“100”]; } ! var [width, height] = fn(); ! console.log(width); //50 console.log(height); //100
Default values function(foo) { foo = foo || “a”; }
Default values function(foo) { foo = foo || “a”; }
function(foo = “a”) {}
function fn(…args) { console.log(args); //[“a”, “b”, “c”] args.forEach(function(arg) { console.log(arg);
}; } ! fn(“a”, “b”, “c”); ! // a // b // c Rest parameters
Rest parameters function fn(a, …args) { console.log(args); //[“b”, “c”] args.forEach(function(arg)
{ console.log(arg); }; } ! fn(“a”, “b”, “c”); ! // b // c
Spread operator function fn(a, b, c) {} ! var array
= [“A”, “B”, “C”]; fn.apply(null, array);
function fn(a, b, c) {} ! var array = [“A”,
“B”, “C”]; fn.apply(null, array); fn(…array); Spread operator
function fn(a, b, c) { var array = Array.prototype. slice.apply(arguments);
} Spread operator
function fn(a, b, c) { var array = Array.prototype. slice.apply(arguments);
var array = […arguments]; } Spread operator
Generators & Iteration Summary Functions Collections Modularity Scoping / Calling
API improvements Proxies
for-of for-of loop on ‘iterables’ Arrays/Sets/Maps are ’iterables’ for-in limitations
Iterable { iterator: function() -> iterator } { next: function()
-> any } Iterators
for-of var array = [“a”, “b”, “c”]; ! for (let
el of array) { console.log(el); } ! // “a” // “b” // “c”
Array comprehension var array = [1, 2, 11, 20]; !
var array_c = [x (for x of array) (if x > 10)]; ! // [11, 20]
function* g() { yield “a”; yield “b”; } Generator var
generator = g(); generator ‘constructor’ generator.next(); //{ value: “a”, done: false} generator.next(); //{ value: “b”, done: false} generator.next(); //{ value: undefined, done: true}
! function* g() { yield “a”; var retVal = yield
“b”; return retVal; } var generator = g(); generator.next().value; //“a” generator.next().value; //“b” generator.next(“c”).value; //“c”
! function* asyncFn() { var data = yield getUser(); doSomethingElse(data);
} function run(genFunction) { var generator = genFunction(); generator.next().value.then(function(val){ generator.next(val); }, function(err) { generator.throw(err); }); } run(asyncFn); Promise
for (let el of generator) { console.log(el); } Generators are
iterables
Generators & Iteration Summary Functions Collections Modularity Scoping / Calling
API improvements Proxies
Set Set of values - NO duplicates Different type of
values add(key)/ has(key) / delete(key) entries() -> Iterator
let countries = new Set(); countries.add(“US”); countries.add(“Italy”); countries.add(“US”); ! countries.values().next().value;
// “US” ! countries.values().next().value; // “Italy” ! for(let country of countries) { console.log(country); }
Map key-value Different type of values Object can be keys
get(key)/ has(key) / set(key,val)
let dict = new Map(); dict.set(“A”, 1); dict.set(“B”, 2); !
dict.get(“A”); // “1” dict.delete(“B”); ! for(let w of dict.keys()) { console.log(w); // “A” // “B” } ! for(let w of dict.values()) { console.log(w); // 1 // 2 }
WeakMap Avoid memory leaks Reference to the key obj held
weakly Key must be an object No iterators methods
Generators & Iteration Summary Functions Collections Modularity Scoping / Calling
API improvements Proxies
Module ! module “ads” { export function register(ad) { return
ad; } } ! import {register} from “ads”; var app = { doIt: function() { register({}); } } export app; app.js lib/ads.js
! module “widget” {…} module “widget/button” {…} module “widget/text” {…}
! ! import ‘lib/ad’ as c; import { meth as method } from ‘a'; ! ! export default class {}; // Ad.js import Ad from ‘ad'; // app.js
\ Loader API System.load('http://json.org/modules/json2.js', function(JSON) { alert(JSON.stringify([0, {a: true}])); });
System.import Configure module loading
Class / Subclass ! class Animal { constructor(name) { this.name
= name; } toString() { return “This is: ” + this.name; } } class Cat extends Animal { constructor(name, ownerName) { super.constructor(name); this.ownerName = ownerName; } ! toString() { return super.toString() + “ owned by ” + this.ownerName; } }
! function Animal(name) { this.name = name; } ! Animal.prototype.toString
= function() { return “This is: ” + this.name; }; ! function Cat(name, ownerName) { Animal.call(this, name); this.ownerName = ownerName; } ! Cat.prototype = Object.create(Animal.prototype); Cat.prototype.constructor = Cat; Cat.prototype.parent = Animal; ! Cat.prototype.toString = function() { return Animal.prototype.toString.call(this) + “ owned by ” + this.ownerName; }
Generators & Iteration Summary Functions Collections Modularity Scoping / Calling
API improvements Proxies
String methods startsWith() endsWith() contains() …
Number methods Number.isInteger(num) Number.isNaN(num) Number.isFinite(num) …
Array methods var divs = document.querySelectorAll("div"); Array.from(divs); ! // [<div></div>,
</div></div>] ! Array.of(10, 11); ! // [10, 11] ! !
var array = [“a”, “b”, “c”]; ! for (let [index,
el] of array.entries()) { console.log(index, el); // 0 “a” // 1 “b” // 2 “c” } ! for (let index of array.keys()) { console.log(index); } ! for (let el of array.values()) { console.log(el); } !
Object methods Object.setPrototypeOf(obj, proto) Object.assign(obj, mixin) Object.is(value1, value2)
var object = { method() { return “a”; } }
object.method(); // “a” !
var object = { method() { return “a”; } }
object.method(); // “a” ! function f(x, y) { return {x: x, y: y};} function f(x, y) { return {x, y}; } =
Math methods Math.log2() Math.log10() Math.sinh() Math.cosh() …
Generators & Iteration Summary Functions Collections Modularity Scoping API improvements
Proxies
Proxies var obj = {num: 1}; ! obj = Proxy(obj,
{ set: function (target, property, value) { target[property] = value + 1; } }); ! obj.num = 2 // [[Set]] console.log(obj.num); // 3
Proxies function createDefensiveObject(target) { return new Proxy(target, { get: function(target,
property) { if (property in target) { return target[property]; } else { throw new ReferenceError(); } } }); } ! var obj = createDefensiveObject({name: “Seb”}); console.log(obj.lastname); //ReferenceError http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/
Generators & Iteration Recap Functions Collections Modularity Scoping / Calling
API improvements Proxies
Promises Symbols Generator Expressions Quasi-literals (template-strings)
Tools Traceur compiler (Google) es6-transpiler es6-module-transpiler (Square) es6-shim defs.js
http://wiki.ecmascript.org/doku.php https://people.mozilla.org/~jorendorff/es6-draft.html http://kangax.github.io/compat-table/es6/ http://esdiscuss.org/ @sebarmeli Sebastiano Armeli