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
220
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
350
Other Decks in Programming
See All in Programming
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
740
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
650
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
34
10k
AIのメモリー
watany
11
1.1k
Understanding Kotlin Multiplatform
l2hyunwoo
0
230
Reactの歴史を振り返る
tutinoko
1
140
Gemini CLI のはじめ方
ttnyt8701
1
110
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
310
QA x AIエコシステム段階構築作戦
osu
0
210
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
How STYLIGHT went responsive
nonsquared
100
5.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A designer walks into a library…
pauljervisheath
207
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
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]