Charadinhas de JavaScript

O que esse código faz? Será que printa alguma coisa? Ou vai dar erro? Dependeria se é no Node ou no browser? Nessa talk apresentarei várias charadinhas com mistérios do JS e HTML, e explicarei cada uma delas!
Serão charadinhas bem mais elaboradas e imprevisíveis do que questões já repetitivas como [] + {}, ou coisas assim. Duvido que você acerte a última charadinha!

Transcript

1. Charadinhas de JS/HTML by macabeus
2. Disclaimer!!!
3. ✨ nada daqui deve ser usado em produção ✨ (apesar de que algumas charadinhas possam ter sido inspiradas em código de prod 🙈)
4. Kahoot!
5. Demo
6. Game Time
7. Charadinha N. 1
8. GAME TIME • CHARADINHA #1 setTimeout(() => { console.log('magic') }, Infinity)
9. GAME TIME • CHARADINHA #1 setTimeout(() => { console.log('magic') }, Infinity) setTimeout( , Infinity)
10. GAME TIME • CHARADINHA #1 setTimeout(() => { console.log('magic') }, Infinity)
11. GAME TIME • CHARADINHA #1 setTimeout(() => { console.log('magic') }, Infinity)
12. GAME TIME • CHARADINHA #1 > 'magic' é printado imediatamente 1x setTimeout(() => { console.log('magic') }, Infinity)
13. GAME TIME • CHARADINHA #1 Isso é confuso pois isso nunca foi bem planejado
14. GAME TIME • CHARADINHA #1 O Infinity é convertido para 1 (ou 0) quando usado como argumento no setTimeout, o que implica ser executado no próximo tick.
15. GAME TIME • CHARADINHA #1
16. GAME TIME • CHARADINHA #1
17. GAME TIME • CHARADINHA #1
18. GAME TIME • CHARADINHA #1
19. GAME TIME • CHARADINHA #1
20. GAME TIME • CHARADINHA #1
21. GAME TIME • CHARADINHA #1 Mas isso não era padronizado. Nas versões antigas do IE e no Opera, o comportamento era nunca chamar o callback.
22. Charadinha N. 2
23. GAME TIME • CHARADINHA #2 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 • CHARADINHA #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 ( ) { 
 }
25. GAME TIME • CHARADINHA #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; ) { 
 }
26. GAME TIME • CHARADINHA #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))
 }
27. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 }
 
 for (let y = 0; y < 2; y++) { setTimeout(() => console.log(y))
 }
28. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 }
 
 for (let y = 0; y < 2; y++) { setTimeout(() => console.log(y))
 }
29. GAME TIME • CHARADINHA #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))
 }
30. GAME TIME • CHARADINHA #2 Isso é confuso pois o comportamento do for é diferente quando usando var ou let
31. GAME TIME • CHARADINHA #2 Quando usando var, a variável é compartilhada em cada iteração:
32. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks Variáveis
33. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 0 Variáveis
34. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 0 Variáveis
35. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } setTimetout(() => console.log(x)) Tasks var x = 0 Variáveis
36. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 0 setTimetout(() => console.log(x)) Variáveis
37. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 1 setTimetout(() => console.log(x)) Variáveis
38. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 1 setTimetout(() => console.log(x)) Variáveis
39. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks setTimetout(() => console.log(x)) var x = 1 setTimetout(() => console.log(x)) Variáveis
40. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 1 setTimetout(() => console.log(x)) setTimetout(() => console.log(x)) Variáveis
41. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 2 setTimetout(() => console.log(x)) setTimetout(() => console.log(x)) Variáveis
42. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 2 setTimetout(() => console.log(x)) setTimetout(() => console.log(x)) Variáveis
43. GAME TIME • CHARADINHA #2 for (var x = 0; x < 2; x++) {
 setTimeout(() => console.log(x))
 } Tasks var x = 2 setTimetout(() => console.log(x)) setTimetout(() => console.log(x)) Variáveis
44. GAME TIME • CHARADINHA #2 Quando usando let, um novo escopo léxico é criado para cada iteração:
45. GAME TIME • CHARADINHA #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks Variáveis
46. GAME TIME • CHARADINHA #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks let y_iteration_1 = 0 Variáveis
47. GAME TIME • CHARADINHA #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks setTimetout(() => console.log(y_iteration_1)) let y_iteration_1 = 0 Variáveis
48. GAME TIME • CHARADINHA #2 for (let y = 0; y < 2; y++) {
 setTimeout(() => console.log(y))
 } Tasks let y_iteration_1 = 0 setTimetout(() => console.log(y_iteration_1)) Variáveis
49. GAME TIME • CHARADINHA #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)) Variáveis
50. GAME TIME • CHARADINHA #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)) Variáveis
51. GAME TIME • CHARADINHA #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)) Variáveis
52. GAME TIME • CHARADINHA #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)) Variáveis
53. GAME TIME • CHARADINHA #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)) Variáveis
54. GAME TIME • CHARADINHA #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)) Variáveis
55. GAME TIME • CHARADINHA #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)) Variáveis
56. GAME TIME • CHARADINHA #2 for ( let z = { foo: 0 }; z.foo < 2; z.foo++ ) {
 setTimeout(() => console.log(z.foo))
 }
57. GAME TIME • CHARADINHA #2 for ( let z = { foo: 0 }; z.foo < 2; z.foo++ ) {
 setTimeout(() => console.log(z.foo))
 } // 2 2
58. GAME TIME • CHARADINHA #2 Vejamos como o for é de fi nido na spec! https://262.ecma-international.org/14.0
59. GAME TIME • CHARADINHA #2 A spec é explícita sobre a diferença entre var e let
60. GAME TIME • CHARADINHA #2 A spec é explícita sobre a diferença entre var e let
61. GAME TIME • CHARADINHA #2 A spec é explícita sobre a diferença entre var e let
62. GAME TIME • CHARADINHA #2
63. GAME TIME • CHARADINHA #2
64. GAME TIME • CHARADINHA #2
65. GAME TIME • CHARADINHA #2
66. GAME TIME • CHARADINHA #2
67. GAME TIME • CHARADINHA #2
68. GAME TIME • CHARADINHA #2
69. GAME TIME • CHARADINHA #2
70. GAME TIME • CHARADINHA #2
71. GAME TIME • CHARADINHA #2
72. GAME TIME • CHARADINHA #2
73. GAME TIME • CHARADINHA #2
74. GAME TIME • CHARADINHA #2
75. GAME TIME • CHARADINHA #2
76. GAME TIME • CHARADINHA #2
77. GAME TIME • CHARADINHA #2
78. GAME TIME • CHARADINHA #2
79. GAME TIME • CHARADINHA #2
80. GAME TIME • CHARADINHA #2
81. GAME TIME • CHARADINHA #2
82. Charadinha N. 3
83. GAME TIME • CHARADINHA #3 Object.is(0, -0)
 Object.is(0n, -0n)
84. GAME TIME • CHARADINHA #3 Object.is(0, -0)
 Object.is(0n, -0n) Object.is( )
 Object.is( )
85. GAME TIME • CHARADINHA #3 Object.is(0, -0)
 Object.is(0n, -0n) (0, -0)
 (0n, -0n)
86. GAME TIME • CHARADINHA #3 Object.is(0, -0)
 Object.is(0n, -0n)
87. GAME TIME • CHARADINHA #3 Object.is(0, -0)
 Object.is(0n, -0n)
88. GAME TIME • CHARADINHA #3 > false true Object.is(0, -0)
 Object.is(0n, -0n)
89. GAME TIME • CHARADINHA #3 Isso é confuso pois JS tem 4 algoritmos de igualdade
90. GAME TIME • CHARADINHA #3 // 1. Loose equality 0 == -0 // true 0n == -0n // true
91. GAME TIME • CHARADINHA #3 // 1. Loose equality 0 == -0 // true 0n == -0n // true // ^ o `n` significa bigint
92. GAME TIME • CHARADINHA #3 // 1. Loose equality 0 == -0 // true 0n == -0n // true
93. GAME TIME • CHARADINHA #3 // 2. Strict equality 0 === -0 // true 0n === -0n // true
94. GAME TIME • CHARADINHA #3 // 3. SameValueZero [0].includes(-0) // true
 [0n].includes(-0n) // true
95. GAME TIME • CHARADINHA #3 // 4. SameValue Object.is(0, -0) // false Object.is(0n, -0n) // true
96. GAME TIME • CHARADINHA #3 developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
97. GAME TIME • CHARADINHA #3 developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
98. GAME TIME • CHARADINHA #3 developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
99. GAME TIME • CHARADINHA #3 Vejamos o SameValue na spec do JS! https://262.ecma-international.org/14.0
100. GAME TIME • CHARADINHA #3
101. GAME TIME • CHARADINHA #3
102. GAME TIME • CHARADINHA #3
103. GAME TIME • CHARADINHA #3
104. GAME TIME • CHARADINHA #3
105. GAME TIME • CHARADINHA #3
106. GAME TIME • CHARADINHA #3
107. GAME TIME • CHARADINHA #3
108. GAME TIME • CHARADINHA #3
109. GAME TIME • CHARADINHA #3
110. GAME TIME • CHARADINHA #3
111. GAME TIME • CHARADINHA #3
112. Charadinha N. 4 (HTML)
113. GAME TIME • CHARADINHA #4 <div id="magic">foo</div> <script> document .documentElement .innerHTML += '<div id="magic">bar</div>' console.log(magic.innerHTML) </script>
114. GAME TIME • CHARADINHA #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>
115. GAME TIME • CHARADINHA #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>
116. GAME TIME • CHARADINHA #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>
117. GAME TIME • CHARADINHA #4 <div id="magic">foo</div> <script> document .documentElement .innerHTML += '<div id="magic">bar</div>' console.log(magic.innerHTML) </script>
118. GAME TIME • CHARADINHA #4 <div id="magic">foo</div> <script> document .documentElement .innerHTML += '<div id="magic">bar</div>' console.log(magic.innerHTML) </script>
119. GAME TIME • CHARADINHA #4 <div id="magic">foo</div> <script> document .documentElement .innerHTML += '<div id="magic">bar</div>' console.log(magic.innerHTML) </script> > undefined
120. GAME TIME • CHARADINHA #4 Isso é confuso pois o código usa um code smell de uma feature do HTML já legada e não recomendada
121. GAME TIME • CHARADINHA #4 Vejamos a spec do HTML https://html.spec.whatwg.org/
122. GAME TIME • CHARADINHA #4 Vejamos a spec do HTML https://html.spec.whatwg.org/
123. GAME TIME • CHARADINHA #4 Vejamos a spec do HTML https://html.spec.whatwg.org/ vs.
124. GAME TIME • CHARADINHA #4 A spec de fi ne quando um elemento é exposed. Ou seja, quando ele fi ca acessível no window
125. GAME TIME • CHARADINHA #4 <!-- uma div com id --> <div id="foo"></div> <script> window.foo // `Element` de `<div id="foo"></div>` </script>
126. GAME TIME • CHARADINHA #4 <!-- uma div com id --> <div id="foo"></div> <script> foo // `Element` de `<div id="foo"></div>` </script>
127. GAME TIME • CHARADINHA #4 <!-- uma img com name --> <img name="foo" /> <script> foo // `Element` de `<img name="foo" />` </script>
128. GAME TIME • CHARADINHA #4 <!-- o mesmo acontece quando o DOM é atualizado --> <script> document .documentElement .innerHTML = '<div id="foo">blah</div>' foo // `Element` de `<div id="foo">blah</div>` </script>
129. GAME TIME • CHARADINHA #4 <!-- e se tivermos duas img com mesmo nome? --> <img name="duplicated" /> <img name="duplicated" /> <script> duplicated /* HTMLCollection(2) [ img, img, duplicated: img ] */ </script>
130. GAME TIME • CHARADINHA #4 <!-- e se for o id? --> <div id="duplicated" /> <div id="duplicated" /> <script> duplicated /* HTMLCollection(2) [ div, div, duplicated: div ] */ </script>
131. GAME TIME • CHARADINHA #4 Como o HTMLCollection não tem a property innerHTML, magic.innerHTML retorna undefined.
132. GAME TIME • CHARADINHA #4 Como o HTMLCollection não tem a property innerHTML, magic.innerHTML retorna undefined. Porém, tem um bug no Firefox, e ele retorna o primeiro Element!
133. GAME TIME • CHARADINHA #4 <div id="magic">foo</div> <div id="magic">bar</div> <script> magic /* Deve retornar `HTMLCollection` Porém, no Firefox retorna o primeiro `Element` */ </script>
134. GAME TIME • CHARADINHA #4
135. Charadinha N. 5
136. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) )
137. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( , )
138. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( class Magic { static console = console.log('foo') }, )
139. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( , console.log(Magic.name) )
140. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) )
141. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) > printa 'foo' e lança exceção em runtime
142. GAME TIME • CHARADINHA #5 Isso é confuso pois temos o ClassExpression e o comma operator
143. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) )
144. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( // isso força que o class se torna uma expressão )
145. GAME TIME • CHARADINHA #5 // A keyword `class` pode ser: // ClassDeclaration: no contexto de statement class Magic { } // ClassExpression: no contexto de expression const M = class Magic { } ( class Magic { } )
146. GAME TIME • CHARADINHA #5 // A keyword `class` pode ser: // ClassDeclaration: no contexto de statement class Magic { } // ClassExpression: no contexto de expression const M = class Magic { } ( class Magic { } )
147. GAME TIME • CHARADINHA #5 // A keyword `class` pode ser: // ClassDeclaration: no contexto de statement class Magic { } // ClassExpression: no contexto de expression const M = class Magic { } ( class Magic { } )
148. GAME TIME • CHARADINHA #5 const M = class Magic { myself = () => Magic // funciona } console.log(Magic) // lança ReferenceError Quando usando o ClassExpression, o nome da class é visível apenas dentro do escopo da class em si
149. GAME TIME • CHARADINHA #5 Algo bem parecido também acontece com function // FunctionDeclaration function magic() { } magic() // consegue acessar o nome da função // FunctionExpression const foo = function magic() { } magic() // lança ReferenceError
150. GAME TIME • CHARADINHA #5 Algo bem parecido também acontece com function // FunctionDeclaration function magic() { } magic() // consegue acessar o nome da função // FunctionExpression const foo = function magic() { } magic() // lança ReferenceError
151. GAME TIME • CHARADINHA #5 Algo bem parecido também acontece com function // FunctionDeclaration function magic() { } magic() // consegue acessar o nome da função // FunctionExpression const foo = function magic() { } magic() // lança ReferenceError
152. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) )
153. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') } console.log(Magic.name) ) , // comma operator
154. GAME TIME • CHARADINHA #5 O comma operator recebe uma lista de expressões e avalia cada item, retornando o último deles
155. GAME TIME • CHARADINHA #5 const a = (1, 2, 3) a // 3
156. GAME TIME • CHARADINHA #5 ['a1', 'b2', ‘c3'].reduce( (state, pair) => { state[pair[0]] = pair[1] return state }, {} ) // {a: '1', b: '2', c: ‘3'}
157. GAME TIME • CHARADINHA #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'}
158. GAME TIME • CHARADINHA #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'}
159. GAME TIME • CHARADINHA #5 Normalmente, nós não usamos o comma operator diretamente. Porém, nossos compiladores o usam frequentemente por duas razões.
160. GAME TIME • CHARADINHA #5
161. GAME TIME • CHARADINHA #5 // 1. minificar o código if(x){foo();return bar()}else{return 1} // é equivalente a return x?(foo(),bar()):1
162. GAME TIME • CHARADINHA #5
163. GAME TIME • CHARADINHA #5 // 2. spec complaince // foo.ts export function foo() { return this } // index.ts import { foo } from './foo.ts'
 foo() // retorna undefined // tsc compila para (0, foo())
164. GAME TIME • CHARADINHA #5 // 2. spec complaince
165. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) )
166. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( class Magic { static console = console.log('foo') }, )
167. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( , console.log( ) )
168. GAME TIME • CHARADINHA #5 ( class Magic { static console = console.log('foo') }, console.log(Magic.name) ) ( , console.log(Magic.name) )
169. Charadinha N. 6
170. GAME TIME • CHARADINHA #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start()
171. GAME TIME • CHARADINHA #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'
172. GAME TIME • CHARADINHA #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() { } }
173. GAME TIME • CHARADINHA #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() { } }
174. GAME TIME • CHARADINHA #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); } }
175. GAME TIME • CHARADINHA #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()
176. GAME TIME • CHARADINHA #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start()
177. GAME TIME • CHARADINHA #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start()
178. GAME TIME • CHARADINHA #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' ou undefined
179. GAME TIME • CHARADINHA #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' ou undefined (depende do environment 🙃)
180. GAME TIME • CHARADINHA #6 Isso é confuso por causa do this
181. GAME TIME • CHARADINHA #6 é muito implícito e dinâmico, e o comportamento do setTimeout varia com o environment Isso é confuso pois o this
182. GAME TIME • CHARADINHA #6 Vamos explorar algumas coisas estranhas do this
183. GAME TIME • CHARADINHA #6
184. GAME TIME • CHARADINHA #6 const foo = { a: 1, printA: function () { console.log(this.a) }, }
185. GAME TIME • CHARADINHA #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, }
186. GAME TIME • CHARADINHA #6 function magic(callback) { this.a = 2 callback() } foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, }
187. GAME TIME • CHARADINHA #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) }, }
188. GAME TIME • CHARADINHA #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) }, }
189. GAME TIME • CHARADINHA #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) }, }
190. GAME TIME • CHARADINHA #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 // o `this` é o contexto global callback() }
191. GAME TIME • CHARADINHA #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 // o `this` é o contexto global callback() }
192. GAME TIME • CHARADINHA #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 // o `this` é o contexto global callback() }
193. GAME TIME • CHARADINHA #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) }, // o `this` aqui } // também é o // contexto global function magic(callback) { this.a = 2 // o `this` é o contexto global callback() }
194. GAME TIME • CHARADINHA #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) }, // o `this` aqui } // também é o // contexto global // = printa `2` function magic(callback) { this.a = 2 // o `this` é o contexto global callback() }
195. GAME TIME • CHARADINHA #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) }, // o `this` aqui } // também é o // contexto global // = printa `2` function magic(callback) { this.a = 2 // o `this` é o contexto global callback() }
196. GAME TIME • CHARADINHA #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, // o `this` aqui } // também é o // contexto global // = printa `2` magic(foo.printA) console.log(foo.a) // 1 console.log(globalThis.a) function magic(callback) { this.a = 2 // o `this` é o contexto global callback() }
197. GAME TIME • CHARADINHA #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, // o `this` aqui } // também é o // contexto global // = printa `2` magic(foo.printA) console.log(foo.a) // 1 console.log(globalThis.a) function magic(callback) { this.a = 2 // o `this` é o contexto global callback() }
198. GAME TIME • CHARADINHA #6 foo.printA() // 1 const foo = { a: 1, printA: function () { console.log(this.a) }, // o `this` aqui } // também é o // contexto global // = printa `2` magic(foo.printA) console.log(foo.a) // 1 console.log(globalThis.a) // 2 function magic(callback) { this.a = 2 // o `this` é o contexto global callback() }
199. GAME TIME • CHARADINHA #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)
200. GAME TIME • CHARADINHA #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'
201. GAME TIME • CHARADINHA #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'
202. GAME TIME • CHARADINHA #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'
203. GAME TIME • CHARADINHA #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'
204. GAME TIME • CHARADINHA #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 // com strict mode, o `this` aqui é `undefined` callback() }
205. GAME TIME • CHARADINHA #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 -> erro! callback() }
206. GAME TIME • CHARADINHA #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() }
207. GAME TIME • CHARADINHA #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)
208. GAME TIME • CHARADINHA #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)
209. GAME TIME • CHARADINHA #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)
210. GAME TIME • CHARADINHA #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` é `foo` callback() }
211. GAME TIME • CHARADINHA #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) const foo = { a: 1, 2, printA: function () { console.log(this.a) }, } function magic(callback) { this.a = 2 // `this` é `foo` callback() }
212. GAME TIME • CHARADINHA #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) const foo = { a: 1, 2, printA: function () { console.log(this.a) }, } function magic(callback) { this.a = 2 // `this` é `foo` callback() }
213. GAME TIME • CHARADINHA #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) const foo = { a: 1, 2, printA: function () { console.log(this.a) }, } function magic(callback) { this.a = 2 // `this` é `foo` callback() }
214. GAME TIME • CHARADINHA #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` é `foo` } function magic(callback) { this.a = 2 // `this` é `foo` callback() }
215. GAME TIME • CHARADINHA #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` é `foo` } // = printa `2` function magic(callback) { this.a = 2 // `this` é `foo` callback() }
216. GAME TIME • CHARADINHA #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) console.log(globalThis.a) const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` é `foo` } // = printa `2` function magic(callback) { this.a = 2 // `this` é `foo` callback() }
217. GAME TIME • CHARADINHA #6 foo.printA() // 1 'use strict' magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) // 2 console.log(globalThis.a) const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` é `foo` } // = printa `2` function magic(callback) { this.a = 2 // `this` é `foo` callback() }
218. GAME TIME • CHARADINHA #6 foo.printA() // 1 'use strict' const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` é `foo` } // = printa `2` magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) // 2 console.log(globalThis.a) function magic(callback) { this.a = 2 // `this` é `foo` callback() }
219. GAME TIME • CHARADINHA #6 foo.printA() // 1 'use strict' const foo = { a: 1, 2, printA: function () { console.log(this.a) }, // `this` é `foo` } // = printa `2` magic.bind(foo)(foo.printA.bind(foo)) console.log(foo.a) // 2 console.log(globalThis.a) // undefined function magic(callback) { this.a = 2 // `this` é `foo` callback() }
220. GAME TIME • CHARADINHA #6
221. GAME TIME • CHARADINHA #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)
222. GAME TIME • CHARADINHA #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)
223. GAME TIME • CHARADINHA #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)
224. GAME TIME • CHARADINHA #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)
225. GAME TIME • CHARADINHA #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)
226. GAME TIME • CHARADINHA #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)
227. GAME TIME • CHARADINHA #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)
228. GAME TIME • CHARADINHA #6 const Foo = function() { this.a = 1 } Foo.prototype.printA = function() { console.log(this.a) // o `this` é o contexto global } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
229. GAME TIME • CHARADINHA #6 const Foo = function() { this.a = 1 } Foo.prototype.printA = function() { console.log(this.a) // o `this` é o contexto global } // = printa `undefined` function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
230. GAME TIME • CHARADINHA #6
231. GAME TIME • CHARADINHA #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)
232. GAME TIME • CHARADINHA #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)
233. GAME TIME • CHARADINHA #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)
234. GAME TIME • CHARADINHA #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)
235. GAME TIME • CHARADINHA #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)
236. GAME TIME • CHARADINHA #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)
237. GAME TIME • CHARADINHA #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)
238. GAME TIME • CHARADINHA #6 class Foo { constructor() { this.a = 1 } printA() { console.log(this.a) // `this` é `undefined`; lança exceção } } function magic(callback) { callback() } const f = new Foo() f.printA() // 1 magic(f.printA)
239. GAME TIME • CHARADINHA #6
240. GAME TIME • CHARADINHA #6 Voltando ao código da charadinha…
241. GAME TIME • CHARADINHA #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) // então por qual razão não lança } // exceção quando o setTimeout chamada? start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start()
242. GAME TIME • CHARADINHA #6 Tem mais um truque: quando é o environment? Existe diversas diferenças entre o browser e o Node.js, incluindo no setTimeout!
243. GAME TIME • CHARADINHA #6 No browser, o setTimeout injeta de forma implícita o contexto global no callback. Assim, essas duas linhas são equivalentes: setTimeout(this.say, 1) setTimeout(this.say.bind(window), 1)
244. GAME TIME • CHARADINHA #6 Já no Node, o this do callback no setTimeout é uma instância da classe Timeout. E como não tem a property message nesse objeto, o this.message é undefined
245. GAME TIME • CHARADINHA #6 this.message = 'foo' class Magic { message = 'bar' say() { console.log(this.message) } start() { setTimeout(this.say, 1000); } } const m = new Magic() m.start()
246. Resultado…
247. Parabéns!
252. @bmacabeus
253. @macabeus.bsky.social