Nada é por acaso... nem os tipos no JS

Nesta talk que dei no 7Masters do JS Experience 2018, falei um pouco sobre os comportamentos "bizarros" que o JS tem ao fazemos operações com tipos de dados diferentes.

Transcript

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