Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Diego Martins de Pinho

July 05, 2018
Tweet

More Decks by Diego Martins de Pinho

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Tabela de precedência e associatividade

    View full-size slide

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

    View full-size slide

  11. 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

    View full-size slide

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

    View full-size slide

  13. 3 - 3 * 1 == null

    View full-size slide

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

    View full-size slide

  15. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide