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

Scope & Closures in JavaScript

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

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

  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