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
310
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.2k
Why you should care about whitespace
battaglr
4
290
SMACSS
battaglr
5
530
Other Decks in Programming
See All in Programming
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
270
TypeScriptでDXを上げろ! Hono編
yusukebe
3
650
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
240
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
180
VS Code Update for GitHub Copilot
74th
2
670
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
980
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
900
PicoRuby on Rails
makicamel
2
140
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
810
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
210
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
20k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Bash Introduction
62gerente
613
210k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
It's Worth the Effort
3n
185
28k
We Have a Design System, Now What?
morganepeng
53
7.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Raft: Consensus for Rubyists
vanstee
140
7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Being A Developer After 40
akosma
90
590k
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