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
320

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
540

Other Decks in Programming

See All in Programming
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
Avatar for uMa uma31
0
450
組込みだけじゃない！TinyGo で始める無料クラウド開発入門
Avatar for Kotaro Otaka otakakot
2
380
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
190
When Dependencies Fail: Building Antifragile Applications in a Fragile World
Avatar for Selçuk Usta selcukusta
0
110
なんでRustの環境構築してないのにRust製のツールが動くの？ / Why Do Rust-Based Tools Run Without a Rust Environment?
Avatar for TOMIKAWA Sotaro ssssota
14
47k
Temporal Knowledge Graphで作る！ 時間変化するナレッジを扱うAI Agentの世界
Avatar for po3rin po3rin
2
680
EMこそClaude Codeでコード調査しよう
Avatar for shibayu36 shibayu36
0
450
Catch Up: Go Style Guide Update
Avatar for ANDPAD inc andpad
0
260
pnpm に provenance のダウングレード を検出する PR を出してみた
Avatar for mattsuu ryo_manba
1
160
CSC305 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
TFLintカスタムプラグインで始める Terraformコード品質管理
Avatar for bells17 bells17
2
460
オープンソースソフトウェアへの解像度🔬
Avatar for うたもく utam0k
17
3.2k

Featured

See All Featured
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.6k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k

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