JS+HTML Riddles

What does this code do? Will it print anything? Or will it throw an error? Does it depend on whether it’s running in Node or in the browser?

In this talk, I’ll present a series of JavaScript and HTML riddles full of mystery, and walk through each one step by step.

(these puzzles are far more elaborate and unpredictable than the usual overused questions like [] + {} or similar examples. I dare you to solve the final riddle!)

Transcript

1. Scan the QR Code to join the game!
2. JS/HTML Crazy Puzzles by macabeus
3. Disclaimer!!!
4. ✨ nothing here is meant to be production code ✨ (although I may have seen something similar in prod before 🙈)
5. ClassQuiz!
6. Demo
7. Game Time
8. Question N. 1
9. GAME TIME • QUESTION #1 setTimeout(() => { console.log('magic') }, Infinity)
10. GAME TIME • QUESTION #1 setTimeout(() => { console.log('magic') }, Infinity) setTimeout( , Infinity)
11. GAME TIME • QUESTION #1 setTimeout(() => { console.log('magic') }, Infinity)
12. GAME TIME • QUESTION #1 > 'magic' is printed immediately, only once setTimeout(() => { console.log('magic') }, Infinity)
13. GAME TIME • QUESTION #1 It’s confusing because it wasn’t well designed
14. GAME TIME • QUESTION #1 The Infinity is converted to 1 (or 0) when used in the setTimeout argument, which implies running on the next tick.
15. GAME TIME • QUESTION #1
16. GAME TIME • QUESTION #1 But it wasn’t standardized in the past. In old IE and Opera versions, the behavior is never calling the callback.
17. Question N. 2
18. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 }
 
 for (let y = 0; y < 2; y++) { setTimeout(() => console.log(y))
 }
19. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 }
 
 for (let y = 0; y < 2; y++) { setTimeout(() => console.log(y))
 } for ( ) {
 
 }
 
 for ( ) { 
 }
20. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 }
 
 for (let y = 0; y < 2; y++) { setTimeout(() => console.log(y))
 } for (var x = 0; ) {
 
 }
 
 for (let y = 0; ) { 
 }
21. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 }
 
 for (let y = 0; y < 2; y++) { setTimeout(() => console.log(y))
 } for ( ) {
 setTimeout(() => console.log(x))
 }
 
 for ( ) { setTimeout(() => console.log(y))
 }
22. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 }
 
 for (let y = 0; y < 2; y++) { setTimeout(() => console.log(y))
 }
23. GAME TIME • QUESTION #2 > 2 2 0 1 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 }
 
 for (let y = 0; y < 2; y++) { setTimeout(() => console.log(y))
 }
24. GAME TIME • QUESTION #2 It’s confusing because the for initializer is different when using var or let
25. GAME TIME • QUESTION #2 When using var, the variable is shared for each iteration:
26. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks Variables
27. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 0 Variables
28. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 0 Variables
29. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } setTimetout(() => console.log(x)) Tasks var x = 0 Variables
30. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 0 setTimetout(() => console.log(x)) Variables
31. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 1 setTimetout(() => console.log(x)) Variables
32. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 1 setTimetout(() => console.log(x)) Variables
33. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks setTimetout(() => console.log(x)) var x = 1 setTimetout(() => console.log(x)) Variables
34. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 1 setTimetout(() => console.log(x)) setTimetout(() => console.log(x)) Variables
35. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 2 setTimetout(() => console.log(x)) setTimetout(() => console.log(x)) Variables
36. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 2 setTimetout(() => console.log(x)) setTimetout(() => console.log(x)) Variables
37. GAME TIME • QUESTION #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 2 setTimetout(() => console.log(x)) setTimetout(() => console.log(x)) Variables
38. GAME TIME • QUESTION #2 When using let, a new lexical scope is created for each iteration:
39. GAME TIME • QUESTION #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks Variables
40. GAME TIME • QUESTION #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks let y_iteration_1 = 0 Variables
41. GAME TIME • QUESTION #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks setTimetout(() => console.log(y_iteration_1)) let y_iteration_1 = 0 Variables
42. GAME TIME • QUESTION #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks let y_iteration_1 = 0 setTimetout(() => console.log(y_iteration_1)) Variables
43. GAME TIME • QUESTION #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks let y_iteration_1 = 0 let y_iteration_2 = 1 setTimetout(() => console.log(y_iteration_1)) Variables
44. GAME TIME • QUESTION #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks let y_iteration_1 = 0 let y_iteration_2 = 1 setTimetout(() => console.log(y_iteration_1)) Variables
45. GAME TIME • QUESTION #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks setTimetout(() => console.log(y_iteration_2)) let y_iteration_1 = 0 let y_iteration_2 = 1 setTimetout(() => console.log(y_iteration_1)) Variables
46. GAME TIME • QUESTION #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks let y_iteration_1 = 0 let y_iteration_2 = 1 setTimetout(() => console.log(y_iteration_2)) setTimetout(() => console.log(y_iteration_1)) Variables
47. GAME TIME • QUESTION #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks let y_iteration_1 = 0 let y_iteration_2 = 1 let y_iteration_2 = 2 setTimetout(() => console.log(y_iteration_2)) setTimetout(() => console.log(y_iteration_1)) Variables
48. GAME TIME • QUESTION #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks let y_iteration_1 = 0 let y_iteration_2 = 1 let y_iteration_2 = 2 setTimetout(() => console.log(y_iteration_2)) setTimetout(() => console.log(y_iteration_1)) Variables
49. GAME TIME • QUESTION #2 let y_iteration_2 = 1 let y_iteration_2 = 2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks let y_iteration_1 = 0 setTimetout(() => console.log(y_iteration_2)) setTimetout(() => console.log(y_iteration_1)) Variables
50. GAME TIME • QUESTION #2 for ( let z = { foo: 0 }; z.foo < 2; z.foo++ ) {
 setTimeout(() => console.log(z.foo))
 }
51. GAME TIME • QUESTION #2 for ( let z = { foo: 0 }; z.foo < 2; z.foo++ ) {
 setTimeout(() => console.log(z.foo))
 } // 2 2
52. GAME TIME • QUESTION #2 Let’s check how for is de fi ned on the spec! https://262.ecma-international.org/14.0
53. GAME TIME • QUESTION #2 The spec is explicit about the differences between var and let
54. GAME TIME • QUESTION #2
55. GAME TIME • QUESTION #2
56. GAME TIME • QUESTION #2
57. GAME TIME • QUESTION #2
58. GAME TIME • QUESTION #2
59. GAME TIME • QUESTION #2
60. GAME TIME • QUESTION #2
61. GAME TIME • QUESTION #2
62. Question N. 3
63. GAME TIME • QUESTION #3 Object.is(0, -0)
 Object.is(0n, -0n)
64. GAME TIME • QUESTION #3 Object.is(0, -0)
 Object.is(0n, -0n) Object.is( )
 Object.is( )
65. GAME TIME • QUESTION #3 Object.is(0, -0)
 Object.is(0n, -0n) (0, -0)
 (0n, -0n)
66. GAME TIME • QUESTION #3 Object.is(0, -0)
 Object.is(0n, -0n)
67. GAME TIME • QUESTION #3 > false true Object.is(0, -0)
 Object.is(0n, -0n)
68. GAME TIME • QUESTION #3 It’s confusing because JS has 4 different equality and uniformity algorithms
69. GAME TIME • QUESTION #3 // 1. Abstract equality comparison 0 == -0 // true 0n == -0n // true // ^ this n means bigint
70. GAME TIME • QUESTION #3 // 2. Strict equality comparison 0 === -0 // true 0n === -0n // true
71. GAME TIME • QUESTION #3 // 3. SameValueZero [0].includes(-0) // true
 [0n].includes(-0n) // true
72. GAME TIME • QUESTION #3 // 4. SameValue Object.is(0, -0) // false Object.is(0n, -0n) // true
73. GAME TIME • QUESTION #3 developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
74. GAME TIME • QUESTION #3 developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
75. GAME TIME • QUESTION #3 developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
76. GAME TIME • QUESTION #3 Let’s check the SameValue on the JS spec! https://262.ecma-international.org/14.0
77. GAME TIME • QUESTION #3
78. GAME TIME • QUESTION #3
79. GAME TIME • QUESTION #3
80. GAME TIME • QUESTION #3
81. GAME TIME • QUESTION #3
82. GAME TIME • QUESTION #3
83. Question N. 4 (HTML)
84. GAME TIME • QUESTION #4 <div id="magic">foo</div> <script> document .documentElement .innerHTML += '<div id="magic">bar</div>' console.log(magic.innerHTML) </script>
85. GAME TIME • QUESTION #4 <div id="magic">foo</div> <script> document .documentElement .innerHTML += '<div id="magic">bar</div>' console.log(magic.innerHTML) </script> <div id="magic">foo</div>
86. GAME TIME • QUESTION #4 <div id="magic">foo</div> <script> document .documentElement .innerHTML += '<div id="magic">bar</div>' console.log(magic.innerHTML) </script> <script> document .documentElement .innerHTML += '<div id="magic">bar</div>' </script>
87. GAME TIME • QUESTION #4 <div id="magic">foo</div> <script> document .documentElement .innerHTML += '<div id="magic">bar</div>' console.log(magic.innerHTML) </script> <script> console.log(magic.innerHTML) </script>
88. GAME TIME • QUESTION #4 <div id="magic">foo</div> <script> document .documentElement .innerHTML += '<div id="magic">bar</div>' console.log(magic.innerHTML) </script>
89. GAME TIME • QUESTION #4 <div id="magic">foo</div> <script> document .documentElement .innerHTML += '<div id="magic">bar</div>' console.log(magic.innerHTML) </script> > undefined
90. GAME TIME • QUESTION #4 It’s confusing because this code uses a code smell from a legacy and not recommended HTML feature
91. GAME TIME • QUESTION #4 Let’s check it on the HTML spec! https://html.spec.whatwg.org/ vs.
92. GAME TIME • QUESTION #4 The spec de fi nes when an element is exposed, in other words, when it’s available from window
93. GAME TIME • QUESTION #4 <!-- a div with id --> <div id="foo"></div> <script> window.foo // Element of `<div id="foo"></div>` </script>
94. GAME TIME • QUESTION #4 <!-- a div with id --> <div id="foo"></div> <script> foo // Element of `<div id="foo"></div>` </script>
95. GAME TIME • QUESTION #4 <!-- an img with name --> <img name="foo" /> <script> foo // Element of `<img name="foo" />` </script>
96. GAME TIME • QUESTION #4 <!-- the same happens when the DOM is updated --> <script> document .documentElement .innerHTML = '<div id="foo">blah</div>' foo // Element of `<div id="foo">blah</div>` </script>
97. GAME TIME • QUESTION #4 <!-- and when there are two img with same name? --> <img name="duplicated" /> <img name="duplicated" /> <script> duplicated /* HTMLCollection(2) [ img, img, duplicated: img ] */ </script>
98. GAME TIME • QUESTION #4 <!-- and same id? --> <div id="duplicated" /> <div id="duplicated" /> <script> duplicated /* HTMLCollection(2) [ div, div, duplicated: div ] */ </script>
99. GAME TIME • QUESTION #4 Since HTMLCollection doesn’t have the innerHTML property, magic.innerHTML returns undefined.
100. GAME TIME • QUESTION #4 Since HTMLCollection doesn’t have the innerHTML property, magic.innerHTML returns undefined. But, there is a bug on Firefox, and it returns the Element for the fi rst one!
101. GAME TIME • QUESTION #4 <div id="magic">foo</div> <div id="magic">bar</div> <script> magic /* It should returns HTMLCollection But, Firefox returns the Element for the first one */ </script>
102. GAME TIME • QUESTION #4
103. Question N. 5
104. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) )
105. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( , )
106. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( class Magic { static console = console.log('foo') }, )
107. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( , console.log(Magic.name) )
108. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) )
109. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) > it prints 'foo' and then throws in runtime
110. GAME TIME • QUESTION #5 It’s confusing because the ClassExpression and the comma operator
111. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) )
112. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( // it forces the class to become an expression )
113. GAME TIME • QUESTION #5 // ClassDeclaration: in a statement context class Magic { } // The class keyword can be: // ClassExpression: in an expression context const M = class Magic { } ( class Magic { } )
114. GAME TIME • QUESTION #5 // ClassDeclaration: in a statement context class Magic { } // The class keyword can be: // ClassExpression: in an expression context const M = class Magic { } ( class Magic { } )
115. GAME TIME • QUESTION #5 // ClassDeclaration: in a statement context class Magic { } // The class keyword can be: // ClassExpression: in an expression context const M = class Magic { } ( class Magic { } )
116. GAME TIME • QUESTION #5 const M = class Magic { myself = () => Magic // it works } console.log(Magic) // it throws ReferenceError When using ClassExpression, the class name is only visible within the scope of the class itself
117. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) )
118. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') } console.log(Magic.name) ) , // comma operator
119. GAME TIME • QUESTION #5 The comma operator receives a list of expressions, it evaluates each item, and then returns the last one
120. GAME TIME • QUESTION #5 const a = (1, 2, 3) a // 3
121. GAME TIME • QUESTION #5 ['a1', 'b2', ‘c3'].reduce( (state, pair) => { state[pair[0]] = pair[1] return state }, {} ) // {a: '1', b: '2', c: ‘3'}
122. GAME TIME • QUESTION #5 ['a1', 'b2', ‘c3'].reduce( (state, pair) => { state[pair[0]] = pair[1] return state }, {} ) // {a: '1', b: '2', c: ‘3'} ['a1', 'b2', 'c3'].reduce( (state, pair) => (state[pair[0]] = pair[1], state), {} ) // {a: '1', b: '2', c: '3'}
123. GAME TIME • QUESTION #5 (state, pair) => { state[pair[0]] = pair[1] return state }, (state, pair) => (state[pair[0]] = pair[1], state), ['a1', 'b2', ‘c3'].reduce( (state, pair) => { state[pair[0]] = pair[1] return state }, {} ) // {a: '1', b: '2', c: ‘3'} ['a1', 'b2', 'c3'].reduce( (state, pair) => (state[pair[0]] = pair[1], state), {} ) // {a: '1', b: '2', c: '3'}
124. GAME TIME • QUESTION #5 Normally, we don’t use the comma operator directly. But our compilers use it frequently for two main reasons.
125. GAME TIME • QUESTION #5 // 1. minify the code if(x){foo();return bar()}else{return 1} // it’s equivalent to return x?(foo(),bar()):1
126. GAME TIME • QUESTION #5 // 2. spec complaince // foo.ts export function foo() { return this } // index.ts import { foo } from './foo.ts'
 foo() // returns undefined // tsc compiles it into (0, foo())
127. GAME TIME • QUESTION #5 // 2. spec complaince
128. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) )
129. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( class Magic { static console = console.log('foo') }, )
130. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( , console.log( ) )
131. GAME TIME • QUESTION #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( , console.log(Magic.name) )
132. Question N. 6
133. GAME TIME • QUESTION #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start()
134. GAME TIME • QUESTION #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start() this.message = 'foo'
135. GAME TIME • QUESTION #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start() class Magic { message = 'bar' say() { } start() { } }
136. GAME TIME • QUESTION #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start() class Magic { message = 'bar' say() { console.log(this.message) } start() { } }
137. GAME TIME • QUESTION #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start() class Magic { message = 'bar' say() { } start() { setTimeout(this.say, 1000); } }
138. GAME TIME • QUESTION #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start() const m = new Magic() m.start()
139. GAME TIME • QUESTION #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start()
140. GAME TIME • QUESTION #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start() > 'foo' or undefined (depends on the env 🙃)
141. GAME TIME • QUESTION #6 It’s confusing because of this
142. GAME TIME • QUESTION #6 is too implicit and dynamic, and the setTimeout depends on the environment It’s confusing because this
143. GAME TIME • QUESTION #6 Let’s explore some weird things on this
144. GAME TIME • QUESTION #6
145. GAME TIME • QUESTION #6 const foo = { a: 1, printA: function () { console.log(this.a) }, }
146. GAME TIME • QUESTION #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, }
147. GAME TIME • QUESTION #6 function magic(callback) { this.a = 2 callback() } foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, }
148. GAME TIME • QUESTION #6 magic(foo.printA) console.log(foo.a) console.log(globalThis.a) function magic(callback) { this.a = 2 callback() } foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, }
149. GAME TIME • QUESTION #6 magic(foo.printA) console.log(foo.a) console.log(globalThis.a) function magic(callback) { this.a = 2 callback() } foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, }
150. GAME TIME • QUESTION #6 magic(foo.printA) console.log(foo.a) console.log(globalThis.a) function magic(callback) { this.a = 2 callback() } foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, }
151. GAME TIME • QUESTION #6 magic(foo.printA) console.log(foo.a) console.log(globalThis.a) foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, } function magic(callback) { this.a = 2 // `this` here is the global context callback() }
152. GAME TIME • QUESTION #6 magic(foo.printA) console.log(foo.a) console.log(globalThis.a) foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, } function magic(callback) { this.a = 2 // `this` here is the global context callback() }
153. GAME TIME • QUESTION #6 magic(foo.printA) console.log(foo.a) console.log(globalThis.a) foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, } function magic(callback) { this.a = 2 // `this` here is the global context callback() }
154. GAME TIME • QUESTION #6 magic(foo.printA) console.log(foo.a) console.log(globalThis.a) foo.printA() // 1 function magic(callback) { this.a = 2 // `this` here is the global context callback() } const foo = { a: 1, printA: function () { console.log(this.a) }, // `this` here } // is also the // global context
155. GAME TIME • QUESTION #6 magic(foo.printA) console.log(foo.a) console.log(globalThis.a) foo.printA() // 1 function magic(callback) { this.a = 2 // `this` here is the global context callback() } const foo = { a: 1, printA: function () { console.log(this.a) }, // `this` here } // is also the // global context // = prints `2`
156. GAME TIME • QUESTION #6 magic(foo.printA) console.log(foo.a) console.log(globalThis.a) foo.printA() // 1 function magic(callback) { this.a = 2 // `this` here is the global context callback() } const foo = { a: 1, printA: function () { console.log(this.a) }, // `this` here } // is also the // global context // = prints `2`
157. GAME TIME • QUESTION #6 foo.printA() // 1 function magic(callback) { this.a = 2 // `this` here is the global context callback() } const foo = { a: 1, printA: function () { console.log(this.a) }, // `this` here } // is also the // global context // = prints `2` magic(foo.printA) console.log(foo.a) // 1 console.log(globalThis.a)
158. GAME TIME • QUESTION #6 foo.printA() // 1 function magic(callback) { this.a = 2 // `this` here is the global context callback() } const foo = { a: 1, printA: function () { console.log(this.a) }, // `this` here } // is also the // global context // = prints `2` magic(foo.printA) console.log(foo.a) // 1 console.log(globalThis.a)
159. GAME TIME • QUESTION #6 foo.printA() // 1 function magic(callback) { this.a = 2 // `this` here is the global context callback() } const foo = { a: 1, printA: function () { console.log(this.a) }, // `this` here } // is also the // global context // = prints `2` magic(foo.printA) console.log(foo.a) // 1 console.log(globalThis.a) // 2
160. GAME TIME • QUESTION #6 foo.printA() // 1 function magic(callback) { this.a = 2 callback() } const foo = { a: 1, printA: function () { console.log(this.a) }, } magic(foo.printA) console.log(foo.a) console.log(globalThis.a) 'use strict'
161. GAME TIME • QUESTION #6 foo.printA() // 1 function magic(callback) { this.a = 2 callback() } const foo = { a: 1, printA: function () { console.log(this.a) }, } magic(foo.printA) console.log(foo.a) console.log(globalThis.a) 'use strict'
162. GAME TIME • QUESTION #6 foo.printA() // 1 function magic(callback) { this.a = 2 callback() } const foo = { a: 1, printA: function () { console.log(this.a) }, } magic(foo.printA) console.log(foo.a) console.log(globalThis.a) 'use strict'
163. GAME TIME • QUESTION #6 foo.printA() // 1 function magic(callback) { this.a = 2 callback() } const foo = { a: 1, printA: function () { console.log(this.a) }, } magic(foo.printA) console.log(foo.a) console.log(globalThis.a) 'use strict'
164. GAME TIME • QUESTION #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, } magic(foo.printA) console.log(foo.a) console.log(globalThis.a) 'use strict' function magic(callback) { this.a = 2 // with strict mode, `this` here is now undefined callback() }
165. GAME TIME • QUESTION #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, } magic(foo.printA) console.log(foo.a) console.log(globalThis.a) 'use strict' function magic(callback) { this.a = 2 // undefined.a -> error! callback() }
166. GAME TIME • QUESTION #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, } magic(foo.printA) console.log(foo.a) console.log(globalThis.a) 'use strict' function magic(callback) { this.a = 2 callback() }
167. GAME TIME • QUESTION #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, } 'use strict' function magic(callback) { this.a = 2 callback() } magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a)
168. GAME TIME • QUESTION #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, } 'use strict' function magic(callback) { this.a = 2 callback() } magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a)
169. GAME TIME • QUESTION #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, } 'use strict' function magic(callback) { this.a = 2 callback() } magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a)
170. GAME TIME • QUESTION #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, } 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) function magic(callback) { this.a = 2 // `this` is `foo` callback() }
171. GAME TIME • QUESTION #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) function magic(callback) { this.a = 2 // `this` is `foo` callback() } const foo = { a: 1, 2, printA: function () { console.log(this.a) }, }
172. GAME TIME • QUESTION #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) function magic(callback) { this.a = 2 // `this` is `foo` callback() } const foo = { a: 1, 2, printA: function () { console.log(this.a) }, }
173. GAME TIME • QUESTION #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) function magic(callback) { this.a = 2 // `this` is `foo` callback() } const foo = { a: 1, 2, printA: function () { console.log(this.a) }, }
174. GAME TIME • QUESTION #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) function magic(callback) { this.a = 2 // `this` is `foo` callback() } const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` is `foo` }
175. GAME TIME • QUESTION #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) function magic(callback) { this.a = 2 // `this` is `foo` callback() } const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` is `foo` } // = prints `2`
176. GAME TIME • QUESTION #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) function magic(callback) { this.a = 2 // `this` is `foo` callback() } const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` is `foo` } // = prints `2`
177. GAME TIME • QUESTION #6 foo.printA() // 1 'use strict' function magic(callback) { this.a = 2 // `this` is `foo` callback() } const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` is `foo` } // = prints `2` magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) // 2 console.log(globalThis.a)
178. GAME TIME • QUESTION #6 foo.printA() // 1 'use strict' function magic(callback) { this.a = 2 // `this` is `foo` callback() } const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` is `foo` } // = prints `2` magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) // 2 console.log(globalThis.a)
179. GAME TIME • QUESTION #6 foo.printA() // 1 'use strict' function magic(callback) { this.a = 2 // `this` is `foo` callback() } const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` is `foo` } // = prints `2` magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) // 2 console.log(globalThis.a) // undefined
180. GAME TIME • QUESTION #6
181. GAME TIME • QUESTION #6 const Foo = function() { this.a = 1 } Foo.prototype.printA = function() { console.log(this.a) } function magic(callback) { callback() } const f = new Foo() f.printA() magic(f.printA)
182. GAME TIME • QUESTION #6 const Foo = function() { this.a = 1 } Foo.prototype.printA = function() { console.log(this.a) } function magic(callback) { callback() } const f = new Foo() f.printA() magic(f.printA)
183. GAME TIME • QUESTION #6 const Foo = function() { this.a = 1 } Foo.prototype.printA = function() { console.log(this.a) } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
184. GAME TIME • QUESTION #6 const Foo = function() { this.a = 1 } Foo.prototype.printA = function() { console.log(this.a) } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
185. GAME TIME • QUESTION #6 const Foo = function() { this.a = 1 } Foo.prototype.printA = function() { console.log(this.a) } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
186. GAME TIME • QUESTION #6 const Foo = function() { this.a = 1 } Foo.prototype.printA = function() { console.log(this.a) } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
187. GAME TIME • QUESTION #6 const Foo = function() { this.a = 1 } Foo.prototype.printA = function() { console.log(this.a) } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
188. GAME TIME • QUESTION #6 const Foo = function() { this.a = 1 } Foo.prototype.printA = function() { console.log(this.a) // this is the global context } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
189. GAME TIME • QUESTION #6 const Foo = function() { this.a = 1 } Foo.prototype.printA = function() { console.log(this.a) // this is the global context } // = prints `undefined` function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
190. GAME TIME • QUESTION #6
191. GAME TIME • QUESTION #6 class Foo { constructor() { this.a = 1 } printA() { console.log(this.a) } } function magic(callback) { callback() } const f = new Foo() f.printA() magic(f.printA)
192. GAME TIME • QUESTION #6 class Foo { constructor() { this.a = 1 } printA() { console.log(this.a) } } function magic(callback) { callback() } const f = new Foo() f.printA() magic(f.printA)
193. GAME TIME • QUESTION #6 class Foo { constructor() { this.a = 1 } printA() { console.log(this.a) } } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
194. GAME TIME • QUESTION #6 class Foo { constructor() { this.a = 1 } printA() { console.log(this.a) } } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
195. GAME TIME • QUESTION #6 class Foo { constructor() { this.a = 1 } printA() { console.log(this.a) } } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
196. GAME TIME • QUESTION #6 class Foo { constructor() { this.a = 1 } printA() { console.log(this.a) } } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
197. GAME TIME • QUESTION #6 class Foo { constructor() { this.a = 1 } printA() { console.log(this.a) } } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
198. GAME TIME • QUESTION #6 class Foo { constructor() { this.a = 1 } printA() { console.log(this.a) // `this` is `undefined`; it throw error } } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
199. GAME TIME • QUESTION #6
200. GAME TIME • QUESTION #6 Going back to the puzzle’s code…
201. GAME TIME • QUESTION #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) // but why does it not crash } // when setTimeout calls it? start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start()
202. GAME TIME • QUESTION #6 There is one more prank: what’s the environment? There are differences between the browser and Node.js including on setTimeout!
203. GAME TIME • QUESTION #6 On browser, it injects the global context on the callback. These two lines are equivalent: setTimeout(this.say, 1) setTimeout(this.say.bind(window), 1)
204. GAME TIME • QUESTION #6 On Node, the this from the setTimeout callback is the instance from the Timeout class. And since there is no message property on this object, this.message is undefined
205. GAME TIME • QUESTION #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start()
206. The result is…
207. Congratulations!
208. @gambiconf
210. @bmacabeus
211. 🪢 from:@bmacabeus