Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Scope & Closures in JavaScript

Avatar for Luciano Battagliero 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.

Avatar for Luciano Battagliero

Luciano Battagliero

September 20, 2018
Tweet

More Decks by Luciano Battagliero

See All by Luciano Battagliero
BEM
Avatar for Luciano Battagliero battaglr
5
6.2k
Why you should care about whitespace
Avatar for Luciano Battagliero battaglr
4
300
SMACSS
Avatar for Luciano Battagliero battaglr
5
530

Other Decks in Programming

See All in Programming
PHPカンファレンス関西2025　基調講演
Avatar for SUGIMOTO Kei sugimotokei
6
1.1k
なぜあなたのオブザーバビリティ導入は頓挫するのか
Avatar for ryotaro kobayashi ryota_hnk
5
590
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
Avatar for adachi.ryo rvirus0817
1
1.4k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
Avatar for yoshi takumiyoshikawa
2
280
JetBrainsのAI機能の紹介 #jjug
Avatar for yusuke yusuke
0
200
kiroでゲームを作ってみた
Avatar for 入井 啓太 iriikeita
0
150
AIのメモリー
Avatar for watany watany
13
1.4k
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
Avatar for sushi-cat sushi0120
0
280
React 使いじゃなくても知っておきたい教養としての React
Avatar for Yuka O’oka oukayuka
18
5.5k
構文解析器入門
Avatar for ydah ydah
7
2.1k
DynamoDBは怖くない！〜テーブル設計の勘所とテスト戦略〜
Avatar for hiroto_0411 hyamazaki
0
200
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
Avatar for ShuyaKinjo shuyakinjo
1
260

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None

  7. var x = 42; console.log(x);

  8. var x = 42; console.log(x); // → 42

  9. var x = 42; console.log(x); // → 42

  10. var x = 42; console.log(x); // → 42

  11. var x = 42; console.log(x); // → 42

  12. None
  13. None
  14. None
  15. None
  16. None

  17. var y = 40; function foo() { var x =

    2; return x + y; } foo();

  18. var y = 40; function foo() { var x =

    2; return x + y; } foo(); // → 42

  19. var y = 40; function foo() { var x =

    2; return x + y; } foo(); // → 42

  20. var y = 40; function foo() { var x =

    2; return x + y; } foo(); // → 42

  21. var y = 40; function foo() { var x =

    2; return x + y; } foo(); // → 42
  22. None

  23. var x = 'tree'; function foo() { var x =

    'shadow'; return x; } foo();

  24. var x = 'tree'; function foo() { var x =

    'shadow'; return x; } foo(); // → shadow

  25. var x = 'tree'; function foo() { var x =

    'shadow'; return x; } foo(); // → shadow

  26. var x = 'tree'; function foo() { var x =

    'shadow'; return x; } foo(); // → shadow
  27. None

  28. function foo() { var x = 2; return x +

    y; } foo();

  29. function foo() { var x = 2; return x +

    y; } foo(); // → ReferenceError: y is not defined

  30. function foo() { var x = 2; return x +

    y; } foo(); // → ReferenceError: y is not defined

  31. function foo() { var x = 2; return x +

    y; } foo(); // → ReferenceError: y is not defined

  32. function foo() { var x = 2; return x +

    y; } foo(); // → ReferenceError: y is not defined
  33. None
  34. None
  35. None
  36. None

  37. window

  38. window === this && window === self && window ===

    frames

  39. window === this && window === self && window ===

    frames // → true
  40. None

  41. global

  42. global === this

  43. global === this // → true

  44. None

  45. 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'); };

  46. ╯ □ ）╯︵ ┻━┻

  47. None

  48. ┬─┬ノ ノ

  49. None

  50. var x = 42; console.log(x) console.log(window.x)

  51. var x = 42; console.log(x) // → 42 console.log(window.x) //

    → 42

  52. var x = 42; window.console.log(this.x)

  53. var x = 42; window.console.log(this.x) // → 42

  54. ☉ ☉

  55. None

  56. var x = 'tree'; function foo() { var x =

    'shadow'; return x; } foo();

  57. var x = 'tree'; function foo() { var x =

    'shadow'; return x; } foo(); // → shadow

  58. var x = 'tree'; function foo() { var x =

    'shadow'; return window.x; } foo();

  59. var x = 'tree'; function foo() { var x =

    'shadow'; return window.x; } foo(); // → tree
  60. None
  61. None
  62. None
  63. None
  64. None

  65. ಥ﹏ಥ

  66. function foo() { var x = 42; console.log(x); }; foo();

    console.log(x);

  67. function foo() { var x = 42; console.log(x); // →

    42 }; foo(); console.log(x); // → ReferenceError

  68. function foo() { var x = 42; console.log(x); // →

    42 }; foo(); console.log(x); // → ReferenceError

  69. function foo() { var x = 42; console.log(x); // →

    42 }; foo(); console.log(x); // → ReferenceError

  70. function foo() { var x = 42; console.log(x); // →

    42 }; foo(); console.log(x); // → ReferenceError

  71. function foo() { var x = 42; console.log(x); // →

    42 }; foo(); console.log(x); // → ReferenceError
  72. None
  73. None

  74. (function () { var x = 42; console.log(x); })(); console.log(x);

  75. (function () { var x = 42; console.log(x); // →

    42 })(); console.log(x); // → ReferenceError

  76. (function () { var x = 42; console.log(x); // →

    42 })(); console.log(x); // → ReferenceError

  77. (function () { var x = 42; console.log(x); // →

    42 })(); console.log(x); // → ReferenceError

  78. (function () { var x = 42; console.log(x); // →

    42 })(); console.log(x); // → ReferenceError

  79. (function () { var x = 42; console.log(x); // →

    42 })(); console.log(x); // → ReferenceError
  80. None
  81. None

  82. if (true) { var x = 42; console.log(x); } console.log(x);

  83. if (true) { var x = 42; console.log(x); // →

    42 } console.log(x); // → 42

  84. if (true) { var x = 42; console.log(x); // →

    42 } console.log(x); // → 42

  85. if (true) { var x = 42; console.log(x); // →

    42 } console.log(x); // → 42

  86. if (true) { var x = 42; console.log(x); // →

    42 } console.log(x); // → 42

  87. if (true) { var x = 42; console.log(x); // →

    42 } console.log(x); // → 42

  88. // “Under the hood” var x; if (true) { x

    = 42; console.log(x); } console.log(x);

  89. // “Under the hood” var x; if (true) { x

    = 42; console.log(x); // → 42 } console.log(x); // → 42

  90. // “Under the hood” var x; if (true) { x

    = 42; console.log(x); } console.log(x);

  91. // “Under the hood” var x; if (true) { x

    = 42; console.log(x); // → 42 } console.log(x); // → 42
  92. None
  93. None

  94. try { throw 42; } catch(x) { console.log(x); } console.log(x);

  95. try { throw 42; } catch(x) { console.log(x); // →

    42 } console.log(x); // → ReferenceError

  96. try { throw 42; } catch(x) { console.log(x); // →

    42 } console.log(x); // → ReferenceError

  97. try { throw 42; } catch(x) { console.log(x); // →

    42 } console.log(x); // → ReferenceError

  98. try { throw 42; } catch(x) { console.log(x); // →

    42 } console.log(x); // → ReferenceError

  99. try { throw 42; } catch(x) { console.log(x); // →

    42 } console.log(x); // → ReferenceError

  100. ☞ ⌐ ☞

  101. None
  102. None
  103. None
  104. None
  105. None

  106. if (true) { let x = 42; console.log(x); } console.log(x);

  107. if (true) { let x = 42; console.log(x); // →

    42 } console.log(x); // → ReferenceError

  108. ノ ∀ ノ⌒･ ｡ ｡ ･゜ﾟ･ ☆

  109. None

  110. { let x = 42; console.log(x); } console.log(x);

  111. { let x = 42; console.log(x); // → 42 }

    console.log(x); // → ReferenceError

  112. ヽ 〇 ﾉ

  113. None
  114. None

  115. console.log(x);

  116. console.log(x); // → ReferenceError

  117. ┐ ､ ┌

  118. console.log(x); var x;

  119. console.log(x); // → undefined var x;

  120. ・・

  121. console.log(x); var x = 42;

  122. console.log(x); // → undefined var x = 42;

  123. ლ ಠ ಠ ლ

  124. None
  125. None

  126. var x = 42;

  127. var x; x = 42;

  128. var x; // Declaration x = 42; // Assignment

  129. None
  130. None
  131. None
  132. None

  133. console.log(x); var x;

  134. console.log(x); // → undefined var x;

  135. // “Under the hood” var x; console.log(x);

  136. // “Under the hood” var x; console.log(x); // → undefined

  137. None

  138. console.log(x); var x = 42;

  139. console.log(x); // → undefined var x = 42;

  140. // “Under the hood” var x; console.log(x); x = 42;

  141. // “Under the hood” var x; console.log(x); // → undefined

    x = 42;
  142. None
  143. None

  144. foo(); function foo() { return 42; }

  145. foo(); // → 42 function foo() { return 42; }

  146. ｏ

  147. // “Under the hood” function foo() { return 42; }

    foo();

  148. // “Under the hood” function foo() { return 42; }

    foo(); // → 42

  149. function foo() { return 2; } foo(); function foo() {

    return 4; }

  150. function foo() { return 2; } foo(); // → 4

    function foo() { return 4; }

  151. // “Under the hood” function foo() { return 2; }

    function foo() { return 4; } foo();

  152. // “Under the hood” function foo() { return 2; }

    function foo() { return 4; } foo(); // → 4

  153. function foo() { return 2; } foo(); var foo =

    function () { return 4; };

  154. function foo() { return 2; } foo(); // → 2

    var foo = function () { return 4; };

  155. งಠ ಠ ง

  156. // “Under the hood” function foo() { return 2; }

    var foo; foo(); foo = function () { return 4; };

  157. // “Under the hood” function foo() { return 2; }

    var foo; foo(); // → 2 foo = function () { return 4; };

  158. foo(); var foo = function () { return 42; };

  159. foo(); // → TypeError: foo is not a function var

    foo = function () { return 42; };

  160. ╰ 益 ╯

  161. // “Under the hood” var foo; foo(); foo = function

    () { return 42; };

  162. // “Under the hood” var foo; foo(); // → TypeError:

    foo is not a function foo = function () { return 42; };
  163. None
  164. None

  165. console.log(x); let x = 42;

  166. console.log(x); // → ReferenceError let x = 42;

  167. ಠ ಠ

  168. None

  169. let x = 2; { console.log(x); let x = 4;

    }

  170. let x = 2; { console.log(x); // → ReferenceError let

    x = 4; }
  171. None
  172. None
  173. None
  174. None
  175. None
  176. None
  177. None

  178. function foo() { return 'I am a Closure!’; }

  179. ☉ ☉

  180. None
  181. None
  182. None

  183. function foo() { let x = 42; return function ()

    { console.log(x); }; } let bar = foo(); bar(); console.log(x);

  184. function foo() { let x = 42; return function ()

    { console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError

  185. function foo() { let x = 42; return function ()

    { console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError

  186. function foo() { let x = 42; return function ()

    { console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError

  187. function foo() { let x = 42; return function ()

    { console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError

  188. function foo() { let x = 42; return function ()

    { console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError

  189. function foo() { let x = 42; return function ()

    { console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError

  190. function foo() { let x = 42; return function ()

    { console.log(x); }; } let bar = foo(); bar(); // → 42 console.log(x); // → ReferenceError
  191. None
  192. None
  193. None

  194. let x = 'FOO_SCOPE'; function foo() { console.log(x); } function

    bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo);

  195. let x = 'FOO_SCOPE'; function foo() { console.log(x); } function

    bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE

  196. let x = 'FOO_SCOPE'; function foo() { console.log(x); } function

    bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE

  197. let x = 'FOO_SCOPE'; function foo() { console.log(x); } function

    bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE

  198. let x = 'FOO_SCOPE'; function foo() { console.log(x); } function

    bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE

  199. let x = 'FOO_SCOPE'; function foo() { console.log(x); } function

    bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE

  200. let x = 'FOO_SCOPE'; function foo() { console.log(x); } function

    bar(callback) { let x = 'BAR_SCOPE'; callback(); } bar(foo); // → FOO_SCOPE

  201. function foo(x) { setTimeout(function () { console.log(x); }, 1000); }

    foo(42);

  202. function foo(x) { setTimeout(function () { console.log(x); // → 42

    }, 1000); } foo(42);

  203. function foo(x) { setTimeout(function () { console.log(x); // → 42

    }, 1000); } foo(42);

  204. function foo(x) { setTimeout(function () { console.log(x); // → 42

    }, 1000); } foo(42);

  205. function foo(x) { setTimeout(function () { console.log(x); // → 42

    }, 1000); } foo(42);

  206. function foo(x) { setTimeout(function () { console.log(x); // → 42

    }, 1000); } foo(42);

  207. // “Deep down in the JavaScript Engine” function setTimeout(callback, delay)

    { // Works using magic! isItTimeAlready(delay) && callback(); }

  208. // “Deep down in the JavaScript Engine” function setTimeout(callback, delay)

    { // Works using magic! isItTimeAlready(delay) && callback(); }

  209. // “Deep down in the JavaScript Engine” function setTimeout(callback, delay)

    { // Works using magic! isItTimeAlready(delay) && callback(); }

  210. ノ ∀ つ──☆ ・ﾟ

  211. function foo(x) { setTimeout(function () { console.log(x); // → 42

    }, 1000); } foo(42);
  212. None
  213. None
  214. None
  215. None
  216. None
  217. None
  218. None
  219. None