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
360
Other Decks in Programming
See All in Programming
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
290
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
130
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
940
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
6.7k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
630
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
740
Devoxx BE - Local Development in the AI Era
kdubois
0
130
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Large-scale JavaScript Application Architecture
addyosmani
514
110k
GraphQLとの向き合い方2022年版
quramy
49
14k
Facilitating Awesome Meetings
lara
56
6.6k
Producing Creativity
orderedlist
PRO
347
40k
Context Engineering - Making Every Token Count
addyosmani
7
280
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The Cult of Friendly URLs
andyhume
79
6.6k
Done Done
chrislema
185
16k
Site-Speed That Sticks
csswizardry
13
920
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]