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
340
Other Decks in Programming
See All in Programming
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
0
300
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
4.4k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
440
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
890
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
590
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
720
Featured
See All Featured
Side Projects
sachag
455
42k
How STYLIGHT went responsive
nonsquared
100
5.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Building an army of robots
kneath
306
45k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Docker and Python
trallard
44
3.5k
Designing Experiences People Love
moore
142
24k
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]