Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
EcmaScript 6 - the future is here
Sebastiano Armeli-Battana
May 16, 2014
Programming
5
6.7k
EcmaScript 6 - the future is here
Talk given at JsDay (Verona, Italy) - May 2014
Sebastiano Armeli-Battana
May 16, 2014
Tweet
Share
More Decks by Sebastiano Armeli-Battana
See All by Sebastiano Armeli-Battana
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
44
Managing a software engineering team
sebarmeli
1
330
Enforcing coding standards in a JS project
sebarmeli
0
430
Enforcing Coding Standards
sebarmeli
1
94
ES6: The future is now
sebarmeli
2
420
Dependency management and Package management in JavaScript
sebarmeli
0
520
Karma - JS Test Runner
sebarmeli
1
650
RequireJS
sebarmeli
5
320
Lazy Load Everything!
sebarmeli
3
280
Other Decks in Programming
See All in Programming
Form実装基本を学び直してみた
hyugatsukui
0
240
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
320
PHPDocにおける配列の型定義を少し知る
shimabox
1
140
jq at the Shortcuts
cockscomb
1
440
Refactor with using `available` and `deprecated`
417_72ki
3
380
How to Fight Production Incidents?
asatarin
0
230
Cloudflare Workersと状態管理
chimame
3
490
なぜRubyコミュニティにコミットするのか?
luccafort
0
320
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
280
What's new in Shopware 6.5
shyim
0
110
ECテックカンファレンス2023
kspace
1
370
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
230
Featured
See All Featured
Thoughts on Productivity
jonyablonski
49
2.7k
YesSQL, Process and Tooling at Scale
rocio
159
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.9k
Design by the Numbers
sachag
271
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
BBQ
matthewcrist
75
8.1k
Visualization
eitanlees
128
12k
Designing for humans not robots
tammielis
245
24k
Optimizing for Happiness
mojombo
365
64k
Building Applications with DynamoDB
mza
85
5k
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