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
Scope & Closures in JavaScript
Search
Luciano Battagliero
September 20, 2018
Programming
1
280
Scope & Closures in JavaScript
A deep dive into Scope & Closures in JavaScript.
Presented at the BeerJS Meetup in September, 2018.
Luciano Battagliero
September 20, 2018
Tweet
Share
More Decks by Luciano Battagliero
See All by Luciano Battagliero
BEM
battaglr
5
6.1k
Why you should care about whitespace
battaglr
4
290
SMACSS
battaglr
5
500
Other Decks in Programming
See All in Programming
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
150
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
1
3.3k
Vue.jsでiOSアプリを作る方法
hal_spidernight
0
120
ASP.NET Core の OpenAPIサポート
h455h1
0
160
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
0
210
Immutable ActiveRecord
megane42
0
120
最近のVS Codeで気になるニュース 2025/01
74th
1
240
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
200
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
240
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
380
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
4.2k
AHC041解説
terryu16
0
540
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
270
Practical Orchestrator
shlominoach
186
10k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Bash Introduction
62gerente
610
210k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Embracing the Ebb and Flow
colly
84
4.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
220
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Transcript
None
None
None
None
None
None
var x = 42; console.log(x);
var x = 42; console.log(x); // → 42
var x = 42; console.log(x); // → 42
var x = 42; console.log(x); // → 42
var x = 42; console.log(x); // → 42
None
None
None
None
None
var y = 40; function foo() { var x =
2; return x + y; } foo();
var y = 40; function foo() { var x =
2; return x + y; } foo(); // → 42
var y = 40; function foo() { var x =
2; return x + y; } foo(); // → 42
var y = 40; function foo() { var x =
2; return x + y; } foo(); // → 42
var y = 40; function foo() { var x =
2; return x + y; } foo(); // → 42
None
var x = 'tree'; function foo() { var x =
'shadow'; return x; } foo();
var x = 'tree'; function foo() { var x =
'shadow'; return x; } foo(); // → shadow
var x = 'tree'; function foo() { var x =
'shadow'; return x; } foo(); // → shadow
var x = 'tree'; function foo() { var x =
'shadow'; return x; } foo(); // → shadow
None
function foo() { var x = 2; return x +
y; } foo();
function foo() { var x = 2; return x +
y; } foo(); // → ReferenceError: y is not defined
function foo() { var x = 2; return x +
y; } foo(); // → ReferenceError: y is not defined
function foo() { var x = 2; return x +
y; } foo(); // → ReferenceError: y is not defined
function foo() { var x = 2; return x +
y; } foo(); // → ReferenceError: y is not defined
None
None
None
None
window
window === this && window === self && window ===
frames
window === this && window === self && window ===
frames // → true
None
global
global === this
global === this // → true
None
function getGlobal() { if (typeof self !== 'undefined') { return
self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } throw new Error('Unable to locate global object'); };
╯ □ )╯︵ ┻━┻
None
┬─┬ノ ノ
None
var x = 42; console.log(x) console.log(window.x)
var x = 42; console.log(x) // → 42 console.log(window.x) //
→ 42
var x = 42; window.console.log(this.x)
var x = 42; window.console.log(this.x) // → 42
☉ ☉
None
var x = 'tree'; function foo() { var x =
'shadow'; return x; } foo();
var x = 'tree'; function foo() { var x =
'shadow'; return x; } foo(); // → shadow
var x = 'tree'; function foo() { var x =
'shadow'; return window.x; } foo();
var x = 'tree'; function foo() { var x =
'shadow'; return window.x; } foo(); // → tree
None
None
None
None
None
ಥ﹏ಥ
function foo() { var x = 42; console.log(x); }; foo();
console.log(x);
function foo() { var x = 42; console.log(x); // →
42 }; foo(); console.log(x); // → ReferenceError
function foo() { var x = 42; console.log(x); // →
42 }; foo(); console.log(x); // → ReferenceError
function foo() { var x = 42; console.log(x); // →
42 }; foo(); console.log(x); // → ReferenceError
function foo() { var x = 42; console.log(x); // →
42 }; foo(); console.log(x); // → ReferenceError
function foo() { var x = 42; console.log(x); // →
42 }; foo(); console.log(x); // → ReferenceError
None
None
(function () { var x = 42; console.log(x); })(); console.log(x);
(function () { var x = 42; console.log(x); // →
42 })(); console.log(x); // → ReferenceError
(function () { var x = 42; console.log(x); // →
42 })(); console.log(x); // → ReferenceError
(function () { var x = 42; console.log(x); // →
42 })(); console.log(x); // → ReferenceError
(function () { var x = 42; console.log(x); // →
42 })(); console.log(x); // → ReferenceError
(function () { var x = 42; console.log(x); // →
42 })(); console.log(x); // → ReferenceError
None
None
if (true) { var x = 42; console.log(x); } console.log(x);
if (true) { var x = 42; console.log(x); // →
42 } console.log(x); // → 42
if (true) { var x = 42; console.log(x); // →
42 } console.log(x); // → 42
if (true) { var x = 42; console.log(x); // →
42 } console.log(x); // → 42
if (true) { var x = 42; console.log(x); // →
42 } console.log(x); // → 42
if (true) { var x = 42; console.log(x); // →
42 } console.log(x); // → 42
// “Under the hood” var x; if (true) { x
= 42; console.log(x); } console.log(x);
// “Under the hood” var x; if (true) { x
= 42; console.log(x); // → 42 } console.log(x); // → 42
// “Under the hood” var x; if (true) { x
= 42; console.log(x); } console.log(x);
// “Under the hood” var x; if (true) { x
= 42; console.log(x); // → 42 } console.log(x); // → 42
None
None
try { throw 42; } catch(x) { console.log(x); } console.log(x);
try { throw 42; } catch(x) { console.log(x); // →
42 } console.log(x); // → ReferenceError
try { throw 42; } catch(x) { console.log(x); // →
42 } console.log(x); // → ReferenceError
try { throw 42; } catch(x) { console.log(x); // →
42 } console.log(x); // → ReferenceError
try { throw 42; } catch(x) { console.log(x); // →
42 } console.log(x); // → ReferenceError
try { throw 42; } catch(x) { console.log(x); // →
42 } console.log(x); // → ReferenceError
☞ ⌐ ☞
None
None
None
None
None
if (true) { let x = 42; console.log(x); } console.log(x);
if (true) { let x = 42; console.log(x); // →
42 } console.log(x); // → ReferenceError
ノ ∀ ノ⌒・ 。 。 ・゜゚・ ☆
None
{ let x = 42; console.log(x); } console.log(x);
{ let x = 42; console.log(x); // → 42 }
console.log(x); // → ReferenceError
ヽ 〇 ノ
None
None
console.log(x);
console.log(x); // → ReferenceError
┐ 、 ┌
console.log(x); var x;
console.log(x); // → undefined var x;
・・
console.log(x); var x = 42;
console.log(x); // → undefined var x = 42;
ლ ಠ ಠ ლ
None
None
var x = 42;
var x; x = 42;
var x; // Declaration x = 42; // Assignment
None
None
None
None
console.log(x); var x;
console.log(x); // → undefined var x;
// “Under the hood” var x; console.log(x);
// “Under the hood” var x; console.log(x); // → undefined
None
console.log(x); var x = 42;
console.log(x); // → undefined var x = 42;
// “Under the hood” var x; console.log(x); x = 42;
// “Under the hood” var x; console.log(x); // → undefined
x = 42;
None
None
foo(); function foo() { return 42; }
foo(); // → 42 function foo() { return 42; }
o
// “Under the hood” function foo() { return 42; }
foo();
// “Under the hood” function foo() { return 42; }
foo(); // → 42
function foo() { return 2; } foo(); function foo() {
return 4; }
function foo() { return 2; } foo(); // → 4
function foo() { return 4; }
// “Under the hood” function foo() { return 2; }
function foo() { return 4; } foo();
// “Under the hood” function foo() { return 2; }
function foo() { return 4; } foo(); // → 4
function foo() { return 2; } foo(); var foo =
function () { return 4; };
function foo() { return 2; } foo(); // → 2
var foo = function () { return 4; };
งಠ ಠ ง
// “Under the hood” function foo() { return 2; }
var foo; foo(); foo = function () { return 4; };
// “Under the hood” function foo() { return 2; }
var foo; foo(); // → 2 foo = function () { return 4; };
foo(); var foo = function () { return 42; };
foo(); // → TypeError: foo is not a function var
foo = function () { return 42; };
╰ 益 ╯
// “Under the hood” var foo; foo(); foo = function
() { return 42; };
// “Under the hood” var foo; foo(); // → TypeError:
foo is not a function foo = function () { return 42; };
None
None
console.log(x); let x = 42;
console.log(x); // → ReferenceError let x = 42;
ಠ ಠ
None
let x = 2; { console.log(x); let x = 4;
}
let x = 2; { console.log(x); // → ReferenceError let
x = 4; }
None
None
None
None
None
None
None
function foo() { return 'I am a Closure!’; }
☉ ☉
None
None
None
function foo() { let x = 42; return function ()
{ console.log(x); }; } let bar = foo(); bar(); console.log(x);
function foo() { let x = 42; return function ()
{ console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError
function foo() { let x = 42; return function ()
{ console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError
function foo() { let x = 42; return function ()
{ console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError
function foo() { let x = 42; return function ()
{ console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError
function foo() { let x = 42; return function ()
{ console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError
function foo() { let x = 42; return function ()
{ console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError
function foo() { let x = 42; return function ()
{ console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError
None
None
None
let x = 'FOO_SCOPE'; function foo() { console.log(x); } function
bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo);
let x = 'FOO_SCOPE'; function foo() { console.log(x); } function
bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE
let x = 'FOO_SCOPE'; function foo() { console.log(x); } function
bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE
let x = 'FOO_SCOPE'; function foo() { console.log(x); } function
bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE
let x = 'FOO_SCOPE'; function foo() { console.log(x); } function
bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE
let x = 'FOO_SCOPE'; function foo() { console.log(x); } function
bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE
let x = 'FOO_SCOPE'; function foo() { console.log(x); } function
bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE
function foo(x) { setTimeout(function () { console.log(x); }, 1000); }
foo(42);
function foo(x) { setTimeout(function () { console.log(x); // → 42
}, 1000); } foo(42);
function foo(x) { setTimeout(function () { console.log(x); // → 42
}, 1000); } foo(42);
function foo(x) { setTimeout(function () { console.log(x); // → 42
}, 1000); } foo(42);
function foo(x) { setTimeout(function () { console.log(x); // → 42
}, 1000); } foo(42);
function foo(x) { setTimeout(function () { console.log(x); // → 42
}, 1000); } foo(42);
// “Deep down in the JavaScript Engine” function setTimeout(callback, delay)
{ // Works using magic! isItTimeAlready(delay) && callback(); }
// “Deep down in the JavaScript Engine” function setTimeout(callback, delay)
{ // Works using magic! isItTimeAlready(delay) && callback(); }
// “Deep down in the JavaScript Engine” function setTimeout(callback, delay)
{ // Works using magic! isItTimeAlready(delay) && callback(); }
ノ ∀ つ──☆ ・゚
function foo(x) { setTimeout(function () { console.log(x); // → 42
}, 1000); } foo(42);
None
None
None
None
None
None
None
None