Scope & Closures in JavaScript

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