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
7k
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
70
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
88
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
230
Managing a software engineering team
sebarmeli
1
510
Enforcing coding standards in a JS project
sebarmeli
0
550
Enforcing Coding Standards
sebarmeli
1
110
ES6: The future is now
sebarmeli
2
470
Dependency management and Package management in JavaScript
sebarmeli
0
650
Karma - JS Test Runner
sebarmeli
1
770
Other Decks in Programming
See All in Programming
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Terraformテスト入門
msato
0
520
CSC307 Lecture 14
javiergs
PRO
0
220
生成AIをkintoneに連携してみた
hideg
0
230
CSC307 Lecture 13
javiergs
PRO
0
150
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
CSC307 Lecture 08
javiergs
PRO
0
330
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
継続的な活動で築く地方エンジニアの道
myamashii
2
350
CSC307 Lecture 06
javiergs
PRO
0
360
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Featured
See All Featured
Done Done
chrislema
179
15k
Embracing the Ebb and Flow
colly
81
4.3k
The World Runs on Bad Software
bkeepers
PRO
63
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Debugging Ruby Performance
tmm1
71
11k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Navigating Team Friction
lara
181
13k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Infographics Made Easy
chrislema
238
18k
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