Pro Yearly is on sale from $80 to $50! »

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

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.

9ce1dc6b940b4ab85ecb2f1eacfbe7c1?s=128

Diego Martins de Pinho

July 05, 2018
Tweet

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