Scope & Closures in JavaScript

A deep dive into Scope & Closures in JavaScript.
Presented at the BeerJS Meetup in September, 2018.

Transcript

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
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
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
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
37. window
38. window === this && window === self && window === frames
39. window === this && window === self && window === frames // → true
41. global
42. global === this
43. global === this // → true
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. ╯ □ ）╯︵ ┻━┻
48. ┬─┬ノ ノ
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. ☉ ☉
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
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
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
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
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. ☞ ⌐ ☞
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. ノ ∀ ノ⌒･ ｡ ｡ ･゜ﾟ･ ☆
110. { let x = 42; console.log(x); } console.log(x);
111. { let x = 42; console.log(x); // → 42 } console.log(x); // → ReferenceError
112. ヽ 〇 ﾉ
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. ლ ಠ ಠ ლ
126. var x = 42;
127. var x; x = 42;
128. var x; // Declaration x = 42; // Assignment
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
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;
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; };
165. console.log(x); let x = 42;
166. console.log(x); // → ReferenceError let x = 42;
167. ಠ ಠ
169. let x = 2; { console.log(x); let x = 4; }
170. let x = 2; { console.log(x); // → ReferenceError let x = 4; }
178. function foo() { return 'I am a Closure!’; }
179. ☉ ☉
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
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);