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.2k
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
150
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
150
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
270
Managing a software engineering team
sebarmeli
1
590
Enforcing coding standards in a JS project
sebarmeli
0
580
Enforcing Coding Standards
sebarmeli
1
120
ES6: The future is now
sebarmeli
2
480
Dependency management and Package management in JavaScript
sebarmeli
0
730
Karma - JS Test Runner
sebarmeli
1
850
Other Decks in Programming
See All in Programming
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
120
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
380
コーディングエージェント概観(2025/07)
itsuki_t88
0
100
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
190
階層化自動テストで開発に機動力を
ickx
1
380
ソフトウェア設計とAI技術の活用
masuda220
PRO
23
6.3k
効率的な開発手段として VRTを活用する
ishkawa
1
180
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
650
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.8k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.6k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.9k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Code Review Best Practice
trishagee
69
19k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
KATA
mclloyd
30
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Docker and Python
trallard
45
3.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Side Projects
sachag
455
43k
Designing Experiences People Love
moore
142
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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