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
ES6: The future is now
Search
Sebastiano Armeli
September 28, 2014
Programming
2
480
ES6: The future is now
Talk given at JsIst (Istanbul, Turkey) - September 2014
Sebastiano Armeli
September 28, 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
EcmaScript 6 - the future is here
sebarmeli
5
7.2k
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
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
930
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
18k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
170
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
780
技術同人誌をMCP Serverにしてみた
74th
1
650
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
920
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
91
30k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Designing Experiences People Love
moore
142
24k
Documentation Writing (for coders)
carmenintech
72
4.9k
4 Signs Your Business is Dying
shpigford
184
22k
Become a Pro
speakerdeck
PRO
29
5.4k
Building Adaptive Systems
keathley
43
2.7k
Transcript
Sebastiano Armeli @sebarmeli http://html5hub.com/wp-content/uploads/2013/11/es6-hiway-sign.png
@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 2014 2015 ES 4
again! (Adobe, Mozilla,! Google)! ES 3.1 ! (Microsoft, Yahoo)! beginning ES 5 spec finalized (June) ECMA-262 Ed.5 (Dec) ES 6 spec completion (Mar) Start publication! (Jun) ECMA-262 Ed.6 ! target release (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
Iteration & Generators Summary Arrow Functions Collections Modularity / Classes
/ Templates Scoping / Destructing / Parameters API improvements Proxies
Iteration & Generators Summary Collections Modularity / Classes / Templates
Scoping / Destructing / Parameters API improvements Proxies Arrow Functions
(Fat) arrow function var y = (x) => x +
1 var y = function(x) { return x + 1; } ES6 ES5
(Fat) arrow function var y = function(x) { return x
+ 1; } ES6 ES5 Syntax sugar var y = (x) => x + 1
(Fat) arrow function var y = function(x) { return x
+ 1; } ES6 ES5 Syntax sugar Lexical `this` binding var y = (x) => x + 1
(Fat) arrow function var y = function(x) { return x
+ 1; } ES6 ES5 No constructor Syntax sugar Lexical `this` binding var y = (x) => x + 1
var y = (x) => {return x + 1} var
y = function(x) { return x + 1; } ES6 ES5
var y = (x) => {return x + 1} var
y = function(x) { return x + 1; } var z = (x, y) => ({ x: x, y: y }) var z = function(x, y) { return { x: x, y: y }; } ES6 ES5
var mapFn = words => words.map((w) => w.length); var mapFn
= function(words) { return words.map(function(w) { return w.length; } } ES6 ES5 mapFn([‘sea’, ‘beach’, ‘do’]); // [3,5,2]
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’, 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 object literals)
Summary Arrow Functions Collections API improvements Proxies Scoping / Destructing
/ Parameters Iteration & Generators Modularity / Classes / Templates
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: w, height: h} = obj; var {width, height} = obj; ! ! console.log(width); // 50 console.log(w); // 50 console.log(height); // 100 console.log(h); // 100
Multiple return value var fn = function(){ return [“50”, “100”];
} ! var [width, height] = fn(); ! console.log(width); //50 console.log(height); //100
var fn = function(){ return { foo: “bar”, fizz: “buzz”
} } ! var {foo, fizz} = fn(); ! console.log(foo); //“bar” console.log(fizz); //“buzz”
Parameter default values function(foo) { foo = foo || “a”;
}
function(foo) { foo = foo || “a”; } function(foo =
“a”) {} Parameter default values
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({id, name}) { console.log(name); } ! fn({name: “Seb”}); //
“Seb Named parameters
Iteration & Generators Summary Collections API improvements Proxies Arrow Functions
Scoping / Destructing / Parameters Modularity / Classes / Templates
for-of for-of loop on ‘iterables’ and iterators Arrays/Sets/Maps are ’iterables’
for-in limitations
for-of var array = [“a”, “b”, “c”]; ! for (let
el of array) { console.log(el); } ! // “a” // “b” // “c”
Iterable { @@iterator: function() -> iterator } { next: function()
-> any } Iterators
Iterator var array = [“a”, “b”, “c”]; ! array.entries() //
Array Iterator array.keys() // Array Iterator Iterator from Array, Map, Set
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
Iteration & Generators Summary Collections API improvements Proxies Arrow Functions
Scoping / Destructing / Parameters Modularity / Classes / Templates
Set NO duplicates values
Set NO duplicates values Different types in a set
Set NO duplicates values Different types in a set add(key)/
has(key) / delete(key)
Set NO duplicates values Different types in a set add(key)/
has(key) / delete(key) values() -> Iterator
let countries = new Set(); countries.add(“US”); countries.add(“Italy”); countries.add(“US”); ! countries
// Set [“US”, “Italy”]
let countries = new Set([“US”, “Italy”]); countries // Set [“US”,
“Italy”] ! ! ! countries.delete(“Italy”); countries // Set [“US”]
! for(let country of countries.values()) { console.log(country); // “US” }
! for(let country of countries) { console.log(country); // “US” }
Map {“foo” : “bar” }
Map {“foo” : “bar” } Keys can be objects
Map {“foo” : “bar” } Keys can be objects get(key);
has(key); set(key,val)
Map {“foo” : “bar” } get(key); has(key); set(key,val) delete(key); clear();
forEach(); Keys can be objects
let dict = new Map(); dict.set(“A”, 1); dict.set(“B”, 2); !
dict // Map {“A”: 1, “B”: 2}
let dict = new Map(); dict.set(“A”, 1); dict.set(“B”, 2); !
dict // Map {“A”: 1, “B”: 2} ! dict.get(“A”); // “1” dict.delete(“B”);
for(let w of dict.keys()) { // Map Iterator console.log(w); //
“A” } ! for(let w of dict.values()) { // Map Iterator console.log(w); // 1 } ! dict.clear(); dict.size; // 0
let dict = new Map([[“x”, 1], [“y”, 2]]); ! !
dict; // Map {x: 1, y: 2} ! ! ! for(let w of dict) { ! console.log(w); // [“x”, 1] // [“y”, 2] ! });
dict.forEach(function(val, key, map) { ! console.log(val); // x // y
! console.log(key); // 1 // 2 ! console.log(map); // Map { x: 1, y: 2} ! });
WeakMap Avoid memory leaks
WeakMap Avoid memory leaks Reference to the key obj held
weakly
WeakMap Avoid memory leaks Reference to the key obj held
weakly Keys must be an objects
WeakMap Avoid memory leaks Reference to the key obj held
weakly Keys must be an objects No iterators methods
Object properties ! with ! Map / WeakMap
Summary Collections API improvements Proxies Arrow Functions Scoping / Destructing
/ Parameters Iteration & Generators Modularity / Classes / Templates
Object Literal ! let obj = { ! __proto__: parentObj,
meth1(a,b) { ! } ! };
Module ! export function register(ad) { return ad; } !
import {register} from “ads”; var app = { doIt: function() { register({}); } } export app; app.js lib/ads.js
export default class {}; // Ad.js import Ad from ‘ad';
// app.'s ! ! import { meth as method } from ‘a’;
Class ! class Animal { constructor(name) { this.name = name;
} toString() { return “This is: ” + this.name; } }
Subclass - super ! class Cat extends Animal { constructor(name,
ownerName) { super(name); this.ownerName = ownerName; } ! toString() { return super() + “ owned by ” + this.ownerName; } }
! 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() { var super = Animal.prototype.toString.call(this); return super + “ owned by ” + this.ownerName; };
Template strings var a = “hello”; var b = “world”;
! `${a} ${b}!`
Template strings var a = “hello”; var b = “world”;
! `${a} ${b}!` var multiline = `Hello world !!!`;
Summary Collections API improvements Proxies Arrow Functions Scoping / Destructing
/ Parameters Iteration & Generators Modularity / Classes / Templates
String methods String.prototype.startsWith(str) => boolean String.prototype.endsWith(str) => boolean String.prototype.contains(str) =>
boolean String.prototype.repeat(num) => string
Number methods Number.isInteger(num) => boolean Number.isNaN(num) => boolean Number.isFinite(num) =>
boolean …
Array methods Array.from(obj) => Array Array.prototype.entries => Iterator Array.of(…args) =>
Array Array.prototype.keys => Iterator Array.prototype.values => Iterator
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)
Math methods Math.log2(num) => num Math.log10(num) => num Math.sinh(num) =>
num Math.cosh(num) => num …
Summary Collections API improvements Proxies Arrow Functions Scoping / Destructing
/ Parameters Iteration & Generators Modularity / Classes / Templates
Proxies Proxy(targetObject, interceptors) ! Different use cases (logging, mocking) Meta-programming
var obj = {num: 1}; ! obj = new 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/ Proxies
Iteration & Generators Recap Arrow Functions Collections Scoping / Destructing
/ Parameters API improvements Proxies Modularity / Classes / Templates
Promises Symbols Better Unicode support Optimized tail calls Other Features..
ES6 today Traceur compiler (Google) es6-transpiler es6-module-transpiler (Square) es6-shim defs.js
http://wiki.ecmascript.org https://people.mozilla.org/~jorendorff/es6-draft.html http://kangax.github.io/compat-table/es6/ http://esdiscuss.org/ @sebarmeli Sebastiano Armeli