Nada é por acaso, nem os tipos no JS - Diego Pinho, Code Prestige [JS EXPERIENCE 2018] - 5 de julho de 2018 São Paulo/SP

1. Nada é por acaso...
nem os tipos no
@DiegoPinho
Evento daora

2. Já sabemos que o JS é
uma linguagem de
tipagem dinâmica...

3. Ou seja, não precisamos definir tipos.
var num = 1;
num = “1”;
num = { };
num = ( ) => { };
num = true;

4. E com isso podemos fazer vários tipos de
operações/comparações com os valores.
var soma = 1 + 2; // 3
var nome = “1” + “A”; // “1A”
var subtracao = 1 - 2; // -1
var bool = 3 > 1; // true

5. A coisa começa ficar “estranha” quando
começamos a combinar os tipos.
1 + “2”; // “3”
[] + []; // “”
true - true; // 0
[] + {}; // “[object Object]”
[] == 0 // true
91 - “1” // 90

6. Para entender o porque isso acontece, é
preciso compreender 4 coisas:
Precedência
Associatividade
Coerção
Igualdade e Semelhança

7. var a = 1 < 2 < 3;
console.log(a);
var b = 3 < 2 < 1;
console.log(b);
TRUE TRUE

8. ????????

9. 1. Precedência
2. Associatividade
3. Coerção dos tipos

10. Tabela de precedência e associatividade

11. 3 < 2 < 1
false < 1
left to right
mesma precedência

12. false < 1
O JavaScript entende que são tipos
diferentes e tenta fazer a igualdade
(coerção de tipos)
Number(false) < 1 0 < 1 true

13. 1 < 2 < 3
true < 3
Number(true) <
3
0 < 1
true

14. 3 - 3 * 1 == null

15. 3 - 3 * 1 == null
3 - 3 * 1 == null
3 - 3 == null
0 == null
false
* tabela de semelhança e igualdade

16. 1. Consultem as tabelas de coerção e precedência
2. Use os métodos Number(), String() e Boolean()
para ver os resultados das coerções
3. Use o === nas comparações para evitar confusões
(evita a coerção automática dos tipos)
4. Utilize tecnologias como o TypeScript

17. (![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]
“fail”

18. Referências
1. Equality comparisons and sameness
2. Equality Table
3. Operator Procedence
4. WTFJS