Scope & Closures in JavaScript

Transcript

1. 1.

   None
2. 2.

   None
3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

   None
7. 7.

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

8. 8.

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

9. 9.

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

10. 10.

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

11. 11.

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

12. 12.

    None
13. 13.

    None
14. 14.

    None
15. 15.

    None
16. 16.

    None
17. 17.

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

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

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

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

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

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

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

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

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

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

    None
23. 23.

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

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

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

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

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

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

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

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

    None
28. 28.

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

    y; } foo();
29. 29.

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

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

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

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

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

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

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

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

    None
34. 34.

    None
35. 35.

    None
36. 36.

    None
37. 37.

    window

38. 38.

    window === this && window === self && window ===

    frames
39. 39.

    window === this && window === self && window ===

    frames // → true
40. 40.

    None
41. 41.

    global

42. 42.

    global === this

43. 43.

    global === this // → true

44. 44.

    None
45. 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. 46.

    ╯ □ ）╯︵ ┻━┻

47. 47.

    None
48. 48.

    ┬─┬ノ ノ

49. 49.

    None
50. 50.

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

51. 51.

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

    → 42
52. 52.

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

53. 53.

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

54. 54.

    ☉ ☉

55. 55.

    None
56. 56.

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

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

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

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

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

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

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

    'shadow'; return window.x; } foo(); // → tree
60. 60.

    None
61. 61.

    None
62. 62.

    None
63. 63.

    None
64. 64.

    None
65. 65.

    ಥ﹏ಥ

66. 66.

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

    console.log(x);
67. 67.

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

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

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

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

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

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

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

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

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

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

    None
73. 73.

    None
74. 74.

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

75. 75.

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

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

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

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

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

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

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

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

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

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

    None
81. 81.

    None
82. 82.

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

83. 83.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    None
93. 93.

    None
94. 94.

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

95. 95.

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

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

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

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

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

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

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

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

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

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

     ☞ ⌐ ☞

101. 101.

     None
102. 102.

     None
103. 103.

     None
104. 104.

     None
105. 105.

     None
106. 106.

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

107. 107.

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

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

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

109. 109.

     None
110. 110.

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

111. 111.

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

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

     ヽ 〇 ﾉ

113. 113.

     None
114. 114.

     None
115. 115.

     console.log(x);

116. 116.

     console.log(x); // → ReferenceError

117. 117.

     ┐ ､ ┌

118. 118.

     console.log(x); var x;

119. 119.

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

120. 120.

     ・・

121. 121.

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

122. 122.

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

123. 123.

     ლ ಠ ಠ ლ

124. 124.

     None
125. 125.

     None
126. 126.

     var x = 42;

127. 127.

     var x; x = 42;

128. 128.

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

129. 129.

     None
130. 130.

     None
131. 131.

     None
132. 132.

     None
133. 133.

     console.log(x); var x;

134. 134.

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

135. 135.

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

136. 136.

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

137. 137.

     None
138. 138.

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

139. 139.

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

140. 140.

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

141. 141.

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

     x = 42;
142. 142.

     None
143. 143.

     None
144. 144.

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

145. 145.

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

146. 146.

     ｏ

147. 147.

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

     foo();
148. 148.

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

     foo(); // → 42
149. 149.

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

     return 4; }
150. 150.

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

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

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

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

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

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

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

     function () { return 4; };
154. 154.

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

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

     งಠ ಠ ง

156. 156.

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

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

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

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

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

159. 159.

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

     foo = function () { return 42; };
160. 160.

     ╰ 益 ╯

161. 161.

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

     () { return 42; };
162. 162.

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

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

     None
164. 164.

     None
165. 165.

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

166. 166.

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

167. 167.

     ಠ ಠ

168. 168.

     None
169. 169.

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

     }
170. 170.

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

     x = 4; }
171. 171.

     None
172. 172.

     None
173. 173.

     None
174. 174.

     None
175. 175.

     None
176. 176.

     None
177. 177.

     None
178. 178.

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

179. 179.

     ☉ ☉

180. 180.

     None
181. 181.

     None
182. 182.

     None
183. 183.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     None
192. 192.

     None
193. 193.

     None
194. 194.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     foo(42);
202. 202.

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

     }, 1000); } foo(42);
203. 203.

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

     }, 1000); } foo(42);
204. 204.

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

     }, 1000); } foo(42);
205. 205.

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

     }, 1000); } foo(42);
206. 206.

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

     }, 1000); } foo(42);
207. 207.

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

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

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

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

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

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

     ノ ∀ つ──☆ ・ﾟ

211. 211.

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

     }, 1000); } foo(42);
212. 212.

     None
213. 213.

     None
214. 214.

     None
215. 215.

     None
216. 216.

     None
217. 217.

     None
218. 218.

     None
219. 219.

     None