9: Qual a diferença entre == e ===?

https://www.instagram.com/tv/B9j_oeXF244/

Caso queira executar os exemplos, use o codepen.io

A diferença entre == (abstrata) e === (estrita) é que 0 == compara por valor APÓS a coerção e === por valor e tipo sem coerção.

Vamos nos aprofundar no ==. Mas, primeiro vamos falar sobre coerção .

Javascript não tem tipagem forte, então ele sempre vai tentar fazer a conversão das variáveis pra fazer determinadas operações, isso é chamado de coerção que é o processo de converter um valor para outro tipo.

tá ligado quando você usa o if(algumObjeto)? por baixo dos panos o javascript converte esse maluco pra boolean e consegue dizer se ele existe ou não.

Voltando ao == ele faz essa coerção implícita que acabei de explicar, e para fazer isso ele segue um monte de regra maluca que depende de várias situações, que até o Brendan Eich tem dúvidas sobre isso então não se preocupe se você não entender de primeira.

SHOW ME THE CODE:

console.log('true == \'true\': ', true == 'true')  // aqui vai dar true
console.log('true == \'1\': ', true == '1')     // aqui vai dar true
console.log('true == true): ', true == true)    // aqui vai dar true
console.log('[===] true === \'true\': ', true === 'true') // aqui vai dar false
console.log('[===]true === \'1\': ', true === '1')    // aqui vai dar false
console.log('[===]true === true): ', true === true)   // aqui vai dar true

Suponha que tenhamos que comparar x == y.

1. Se x e y tiver o mesmo tipo. Em seguida, ele os compara com o operador ===.
2. Se x é null e y é undefinedentão retorne true.
3. Se x é undefined e y é null então retorne true.
4. Se x é do tipo number e y é do tipo string retorne x == toNumber(y).
5. Se x é do tipo stringe y é do tipo number retorne toNumber(x) == y.
6. Se x for do tipo boolean retorne toNumber(x) == y.
7. Se y for do tipo boolean retorne x == toNumber(y).
8. Se x é um dos tipos (string, symbol ou number) e yé o tipo object então retorne x == toPrimitive(y).
9. Se x for um object e x for um string, symbol Então retorne toPrimitive(x) == y.
10. Senão, retorne false.

Nota: toPrimitive usa primeiro o valueOf e depois o toString nos objetos para obter o valor primitivo desse objeto.

Vamos dar exemplos.

Todos esses exemplos retornam true.

O primeiro exemplo vai para a condição um porque xe y tem o mesmo tipo e valor.

O segundo exemplo vai para a condição quatro y é convertida em number antes de comparar.

O terceiro exemplo vai para a condição dois.

O quarto exemplo vai para a condição sete porque y é boolean.

O quinto exemplo vai para a condição oito . O array é convertido em string usando o toString()que retorna 1,2.

O último exemplo vai para a condição dez . O objeto é convertido em um string usando o toString() que retorna [object Object].

Se usarmos o operador ===, todas as comparações, com exceção do primeiro exemplo, retornarão false, porque não têm o mesmo tipo, enquanto o primeiro exemplo retornará true porque os dois têm o mesmo tipo e valor.

Ainda não entendeu? Calma, nem quem fez o JS entende isso direito (brinks) mas aqui estão alguns artigos legais pra tentar ao menos entender o básico disto:

• Sempre olhe a documentação oficial.
• Excelente artigo no Medium, falando a respeito.
• Consulte a tabela de igualdade do JS
• Exemplos de bizarrices no Javascript.
• Outros exemplos de bizarrice.
• Artigo interessante do Hackernoon.

Baseado no excelente artigo: 70 Interview Questions