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 – a tour
Search
Ankur Sethi
April 25, 2015
Programming
1
170
ECMAScript 6 – a tour
A short tour of some of the new features in ECMAScript 6. Presented at BangaloreJS.
Ankur Sethi
April 25, 2015
Tweet
Share
More Decks by Ankur Sethi
See All by Ankur Sethi
Building abof.com
s3thi
0
210
Other Decks in Programming
See All in Programming
Terraformテスト入門
msato
0
540
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
20240706_CDKConf
takuyay0ne
0
1.2k
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Activities at Cairo Library
cairolibrary720
0
1.2k
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
CSC307 Lecture 11
javiergs
PRO
0
240
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
The Language of Interfaces
destraynor
151
23k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Gamification - CAS2011
davidbonilla
78
4.9k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Raft: Consensus for Rubyists
vanstee
134
6.5k
How to Think Like a Performance Engineer
csswizardry
4
590
Typedesign – Prime Four
hannesfritz
37
2.2k
Transcript
ECMAScript 6 A tour
The ‘let’ statement
var myvar = 'global'; function f() { console.log(myvar); if (true)
{ var myvar = 'local'; } console.log(myvar); }
var myvar = 'global'; function f() { console.log(myvar); if (true)
{ var myvar = 'local'; } console.log(myvar); } > undefined > local
Hoisting
function infiltrate() { // do something // ... var bulletCount
= 10; // do something else // ... var handler = function() { // handle difficult things }; }
function infiltrate() { var bulletCount; var handler; // do something
// ... bulletCount = 10; // do something else // ... handler = function() { // handle difficult things }; }
function f() { console.log(bulletCount); var bulletCount = 42; console.log(bulletCount); }
function f() { console.log(bulletCount); var bulletCount = 42; console.log(bulletCount); }
> undefined > 42
'use strict'; function f() { console.log(bulletCount); let bulletCount = 42;
console.log(bulletCount); } > ReferenceError: can't access lexical declaration `bulletCount’ before initialization
Function Scope
function getAnswer() { if (true) { var theAnswer = 42;
} console.log(theAnswer); }
function getAnswer() { if (true) { var theAnswer = 42;
} console.log(theAnswer); } > 42
'use strict'; function getAnswer() { if (true) { let theAnswer
= 42; } console.log(theAnswer); } > ReferenceError: theAnswer is not defined
‘use strict’; let myvar = 'global'; function f() { console.log(myvar);
if (true) { let myvar = 'local'; } console.log(myvar); }
‘use strict’; let myvar = 'global'; function f() { console.log(myvar);
if (true) { let myvar = 'local'; } console.log(myvar); } > global > global
‘use strict’; let myvar = 'global'; function f() { console.log(myvar);
if (true) { let myvar = ‘local'; console.log(myvar); } }
‘use strict’; let myvar = 'global'; function f() { console.log(myvar);
if (true) { let myvar = ‘local'; console.log(myvar); } } > global > local
Protip #1 Use ‘let’ for mutable references
The ‘const’ statement
'use strict'; const theAnswer = 42; theAnswer = 87;
'use strict'; const theAnswer = 42; theAnswer = 87; >
Exception: SyntaxError: invalid assignment to const foo
'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana'
}; agents['Figgis'] = 'Cyril';
'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana'
}; agents = { 'Figgis': 'Cyril' };
'use strict'; const agents = { 'Archer': 'Sterling', 'Kane': 'Lana'
}; agents = { 'Figgis': 'Cyril' }; > Exception: SyntaxError: invalid assignment to const agents
Protip #2 Use ‘const’ for immutable references
Protip #3 Replace all usages of ‘var’ with either ‘let’
or ‘const’ depending on context
The array spread operator
var theNumbers = [4, 8, 15]; function addThree(a, b, c)
{ return a + b + c; }
var theNumbers = [4, 8, 15]; function addThree(a, b, c)
{ return a + b + c; } // ECMAScript 5 addThree.apply(null, theNumbers);
var theNumbers = [4, 8, 15]; function addThree(a, b, c)
{ return a + b + c; } // ECMAScript 5 addThree.apply(null, theNumbers); // ECMAScript 6 addThree(...theNumbers);
addThree(...theNumbers); addThree(4, 8, 15);
var foo = [15, 16]; var theNumbers = [4, 8,
...foo, 23, 42]; console.log(theNumbers);
> Array [ 4, 8, 15, 16, 23, 42 ]
var foo = [15, 16]; var theNumbers = [4, 8, ...foo, 23, 42]; console.log(theNumbers);
Protip #4 Replace Function.apply with the array spread operator
var theNumbers = [4, 8, 15, 16, 23, 42]; var
theNumbersCopy = [...theNumbers]; Protip #5 Use the array spread operator to copy arrays
Template Strings
let thing = 'piggies'; let quantity = 3; console.log(`${quantity} little
${thing}`); > 3 little piggies
function sayHello(name) { return `Hello, ${name}!`; } console.log(sayHello('Kreiger'));
function sayHello(name) { return `Hello, ${name}!`; } console.log(sayHello('Kreiger')); > Hello,
Kreiger!
let multiline = `This is a multiline string!`;
for…of loops
var theNumbers = [4, 8, 15, 16, 23, 42]; var
total = 0; for (var i in theNumbers) { total += i; }
var theNumbers = [4, 8, 15, 16, 23, 42]; var
total = 0; for (var i in theNumbers) { total += i; } > “0012345”
Array.prototype.sumOfSquares = function() { // Blazing fast sum of squares
code. }; var theNumbers = [4, 8, 15]; for (var i in theNumbers) { console.log(i); }
Array.prototype.sumOfSquares = function() { // Blazing fast sum of squares
code. }; var theNumbers = [4, 8, 15]; for (var i in theNumbers) { console.log(i); } > 0 > 1 > 2 > sumOfSquares
var theNumbers = [4, 8, 15, 16, 23, 42]; var
total = 0; for (var i of theNumbers) { total += i; }
var theNumbers = [4, 8, 15, 16, 23, 42]; var
total = 0; for (var i of theNumbers) { total += i; } > 108
Arrow Functions
var nums = [4, 8, 15, 16, 23, 42]; //
ECMAScript 5 var squares = nums.map(function(n) { return n * n; }); // ECMAScript 6 let squares = nums.map((n) => n * n);
const squareNumber = n => n * n; const squareNumber
= (n) => n * n; const addNumbers = a, b => a + b; // Error! const addNumbers = (a, b) => a + b; const addNumbers = (a, b) => { return a + b; };
function Person() { this.age = 0; setInterval(function growUp() { this.age++;
}, 1000); } var p = new Person();
function Person() { var self = this; self.age = 0;
setInterval(function growUp() { self.age++; }, 1000); } var p = new Person();
function Person() { this.age = 0; setInterval(() => { this.age++;
}, 1000); } var p = new Person();
Computed Object Properties
var p1 = new Person('Sterling', 'Archer'); var p2 = new
Person('Lana', 'Kane'); var ages = {}; ages[p1.firstName + ' ' + p1.lastName] = 37; ages[p1.firstName + ' ' + p1.lastName] = 33; { 'Sterling Archer': 37, 'Lana Kane': 33 }
let p1 = new Person('Sterling', 'Archer'); let p2 = new
Person('Lana', 'Kane'); let ages = { [p1.firstName + ' ' + p1.lastName]: 37, [p2.firstName + ' ' + p2.lastName]: 33 }; { 'Sterling Archer': 37, 'Lana Kane': 33 }
Property Value Shorthand in Object Literals
var agentName = 'Sterling Archer'; var obj = { agentName:
agentName }; { agentName: 'Sterling Archer' }
const agentName = 'Sterling Archer'; const obj = { agentName
}; { agentName: 'Sterling Archer' }
Method Shorthand in Object Literals
var atom = { value: 1, addValue: function (value) {
return atom.value + value; } };
const atom = { value: 1, addValue(value) { return atom.value
+ value; } };
Rest Parameters
function handleEvent(event) { var args = Array.slice.call(null, arguments, 1); args.forEach(function(arg)
{ // do something }); }; handleEvent('click', arg1, arg2, arg3);
function handleEvent(event, ...args) { args.forEach(function(arg) { // do something });
}; handleEvent('click', arg1, arg2, arg3);
Default Parameters
function frobulate(arg1, arg2) { arg1 = arg1 || 23; arg2
= arg2 || 42; } frobulate(); frobulate(10); frobulate(10, 20);
function frobulate(arg1, arg2) { if (typeof arg1 === 'undefined') {
arg1 = 23; } if (typeof arg2 === 'undefined') { arg2 = 42; } } frobulate(); frobulate(10); frobulate(10, 20);
function frobulate(arg1 = 23, arg2 = 42) { // do
something } frobulate(); frobulate(10); frobulate(10, 20);
function frobulate(arg1, arg2 = 42) { // do something }
frobulate(); frobulate(10); frobulate(10, 20);
More! • Classes • Destructuring • Generators • New data
structures (Map, WeakMap, Set, WeakSet) • Promises • Symbols • New methods on Object, String, Array, Math, Number • Better Unicode support • Modules
Use it Now Use shipping features in modern browsers https://kangax.github.io/compat-table/es6/
Use it Now Use io.js https://iojs.org
Use it Now Compile down to ECMAScript 5 with Babel
http://babeljs.io
[email protected]