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.3k
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
160
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
160
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
280
Managing a software engineering team
sebarmeli
1
600
Enforcing coding standards in a JS project
sebarmeli
0
590
Enforcing Coding Standards
sebarmeli
1
120
ES6: The future is now
sebarmeli
2
480
Dependency management and Package management in JavaScript
sebarmeli
0
740
Karma - JS Test Runner
sebarmeli
1
850
Other Decks in Programming
See All in Programming
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.8k
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
CSC305 Lecture 02
javiergs
PRO
1
260
Swift Concurrency - 状態監視の罠
objectiveaudio
2
420
Advance Your Career with Open Source
ivargrimstad
0
250
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
150
CSC305 Lecture 01
javiergs
PRO
1
380
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.2k
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
120
開発生産性を上げるための生成AI活用術
starfish719
1
120
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
950
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Unsuck your backbone
ammeep
671
58k
Embracing the Ebb and Flow
colly
88
4.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
How to Ace a Technical Interview
jacobian
280
23k
Rails Girls Zürich Keynote
gr2m
95
14k
Docker and Python
trallard
46
3.6k
Thoughts on Productivity
jonyablonski
70
4.8k
Optimizing for Happiness
mojombo
379
70k
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