<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Jessuir Cleydson</title>
    <description>The latest articles on Forem by Jessuir Cleydson (@jessuircleydson).</description>
    <link>https://forem.com/jessuircleydson</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1039154%2Fc2d5b6b3-362c-4096-ae3e-3d3a85b8f1cc.jpeg</url>
      <title>Forem: Jessuir Cleydson</title>
      <link>https://forem.com/jessuircleydson</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/jessuircleydson"/>
    <language>en</language>
    <item>
      <title>The Abstract Equality Comparison Algorithm</title>
      <dc:creator>Jessuir Cleydson</dc:creator>
      <pubDate>Mon, 06 Mar 2023 04:12:24 +0000</pubDate>
      <link>https://forem.com/jessuircleydson/the-abstract-equality-comparison-algorithm-1mn9</link>
      <guid>https://forem.com/jessuircleydson/the-abstract-equality-comparison-algorithm-1mn9</guid>
      <description>&lt;p&gt;Revisitando alguns assuntos bases do &lt;strong&gt;JavaScript&lt;/strong&gt; percebi a necessida de aprofundar um pouco mais a teoria de como as coisas funcionam &lt;em&gt;behind the scenes&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Vou tentar trazer aqui um resumo sobre a interação do "Algoritmo de comparação de igualdade" ou como o JavaScript chama "The Abstract Equality Comparison Algorithm" e o "Type Coercion". Em outras palavras eu quero tentar explicar como o &lt;code&gt;==&lt;/code&gt;(&lt;em&gt;igual a&lt;/em&gt;) entende os parâmetros passados a ele para comparação de igualdade.&lt;/p&gt;

&lt;p&gt;Inicio esse artigo considerando que se você chegou aqui você entende o que é o &lt;code&gt;==&lt;/code&gt; no JavaScript. Mas caso tenha caído aqui de paraquedas &lt;a href="https://www.alura.com.br/artigos/operadores-matematicos-em-javascript"&gt;segue um link&lt;/a&gt; para conhecer antes de ler o meu texto.&lt;/p&gt;




&lt;h2&gt;
  
  
  x &lt;code&gt;==&lt;/code&gt; y
&lt;/h2&gt;

&lt;p&gt;Sabemos então que esse operador recebe dois parâmetros e compara seus valores, simples assim, ou será que não?&lt;br&gt;
Para nós que apenas vemos o resultado final é tudo muito mágico e simples mas as vezes podemos nos deparar com algumas situações (ou evitá-las) se conhecermos um poco mais como a "mágica" funciona.&lt;/p&gt;

&lt;p&gt;Vou utilizar um exemplo que retirei do livro &lt;a href="https://github.com/cezaraugusto/You-Dont-Know-JS/blob/portuguese-translation/up%20%26%20going/ch2.md#igualdade"&gt;You Don't Know Js&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let arr1 = [1,2,3];
let arr2 = [1,2,3];
let str = "1,2,3";
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Em um primeiro momento podemos dizer que visualmente &lt;code&gt;arr1&lt;/code&gt; é igual a &lt;code&gt;arr2&lt;/code&gt; e os dois são diferentes de &lt;code&gt;str&lt;/code&gt;, correto?&lt;/p&gt;

&lt;p&gt;Acontesse que quando os comparamos utilizando o &lt;code&gt;==&lt;/code&gt; temos uma pequena surpresa.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arr1 == str; // true
arr2 == str; // true
arr1 == arr2; // false
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Descobrimos que na verdade &lt;code&gt;arr1&lt;/code&gt; é diferente de &lt;code&gt;arr2&lt;/code&gt; porém os dois são iguais a &lt;code&gt;str&lt;/code&gt;. Como pode isso?&lt;/p&gt;

&lt;p&gt;Poderíamos apenas aceitar que é assim que funciona o JavaScript e seguir com nossas vidas, mas se você está curioso para entender porquê &lt;code&gt;[1,2,3] é diferente de [1,2,3]&lt;/code&gt; continua lendo aqui...&lt;/p&gt;




&lt;p&gt;&lt;a href="https://i.giphy.com/media/hS6KvugVZSAH6/giphy-downsized-large.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/hS6KvugVZSAH6/giphy-downsized-large.gif" alt="Curious" width="376" height="376"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Legal você ficou, vamos lá!&lt;br&gt;
Cavando um pouco mais fundo esbarramos com dois outros temas: Type Coercion e The Abstract Equality Comparison Algorithm.&lt;br&gt;
Abaixo vou te dar um breve resumo sobre o Type Coercion para em seguida entendermos como ele se aplica no segundo, e mais importante, tema.&lt;/p&gt;
&lt;h2&gt;
  
  
  Type Coercion
&lt;/h2&gt;

&lt;p&gt;O &lt;code&gt;Type Coercion&lt;/code&gt; é a forma como o JavaScript converte o tipo de um valor para outro tipo de forma "automática" e implícita.&lt;/p&gt;

&lt;p&gt;Podemos ver isso quando tentamos somar um número com um texto ou na linguagem de tipos seria um &lt;code&gt;number&lt;/code&gt; com uma &lt;code&gt;string&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SEyRnXuF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sap43us2ch6xqw09gkbc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SEyRnXuF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sap43us2ch6xqw09gkbc.png" alt='12 + "20"' width="161" height="110"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Nesse momento para evitar qualquer quebra na execução do código o &lt;code&gt;Type Coercion&lt;/code&gt; decide que o valor &lt;code&gt;12&lt;/code&gt; do tipo &lt;code&gt;number&lt;/code&gt; vai ser convertido para &lt;code&gt;string&lt;/code&gt; e em vez de somar ele concatena os dois valores em uma única string garantindo a execução do código.&lt;/p&gt;

&lt;p&gt;O javaScript então se utiliza de algoritmos próprios para decidir e priorizar qual valor ele deve converter para que o código possa ser executado com sucesso.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Não vou me prolongar mais sobre o Type Coercion porque até aqui é suficiente para entender o próximo e principal tópico. Quem sabe eu trago um artigo só sobre ele no futuro.&lt;/em&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  The Abstract Equality Comparison Algorithm
&lt;/h2&gt;

&lt;p&gt;Chegamos então no X da questão&lt;br&gt;
&lt;a href="https://i.giphy.com/media/HBWbIuHvXI2Eo/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/HBWbIuHvXI2Eo/giphy.gif" alt="Find the X" width="208" height="201"&gt;&lt;/a&gt;&lt;br&gt;
Esse algoritmo abstrato nada mais é que a forma como o javaScript aplica o &lt;code&gt;Type Coercion&lt;/code&gt; no momento da comparação de &lt;code&gt;==&lt;/code&gt;(igual a) e entender isso te permite manipular melhor ou com mais certeza seu código e evitar aqueles momentos onde o código funciona por pura mágica.&lt;br&gt;
&lt;a href="https://i.giphy.com/media/NmerZ36iBkmKk/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/NmerZ36iBkmKk/giphy.gif" alt="Magic" width="245" height="165"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Behind the scenes&lt;/em&gt; ele vai tentar comparar os &lt;strong&gt;valores&lt;/strong&gt; dos paramêtros &lt;code&gt;x == y&lt;/code&gt; e quando algo que não deveria acontecer, acontece, ele te da uma ajuda convertendo os tipos dos valores. Com isso ele aplica seu algoritmo de comparação de igualdade onde ele classifica prioridades de conversão e cria condições para que elas sejam aplicadas.&lt;/p&gt;

&lt;p&gt;No tópico &lt;a href="https://262.ecma-international.org/5.1/#sec-11.9.3"&gt;11.9.3&lt;/a&gt; da especificação do JavaScript ele institui que:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DJVUwAa2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kqdg41b8yk531rtxsin.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DJVUwAa2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kqdg41b8yk531rtxsin.png" alt="Se o X é Object e o Y é uma String ou Number, retorna o resultado da comparação de ToPrimitive(x) == y" width="760" height="45"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Se o X é Object e o Y é uma String ou Number, retorna o resultado da comparação de ToPrimitive(x) == y.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;O que ele quer dizer com isso?&lt;br&gt;
Ele ta dizendo que se no código que você escreveu &lt;code&gt;[1,2,3] == "1,2,3"&lt;/code&gt; o &lt;strong&gt;X&lt;/strong&gt;&lt;code&gt;= [1,2,3]&lt;/code&gt; for um objeto e o &lt;strong&gt;Y&lt;/strong&gt;&lt;code&gt;= "1,2,3"&lt;/code&gt; for uma String ou Number ele vai tentar converter o valor de &lt;strong&gt;X&lt;/strong&gt; &lt;em&gt;(por trás dos panos)&lt;/em&gt; para um valor primitivo usando o &lt;code&gt;Type Coercion&lt;/code&gt;, que vimos anteriormente, e depois da conversão comparar os valores.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Se você ficou confuso com a palavra &lt;strong&gt;primitivo&lt;/strong&gt; &lt;a href="https://developer.mozilla.org/pt-BR/docs/Glossary/Primitive"&gt;segue um link&lt;/a&gt; pra entender melhor o parágrafo anterior.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Nesse ponto começamos a ter uma boa dica para entender o motivo de &lt;code&gt;[1,2,3] ser igual a "1,2,3"&lt;/code&gt; ou como em nosso exemplo &lt;code&gt;arr1 == str // true&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Olha só! Quando utilizamos o typeof para verificar o tipo dos valores do nosso exemplo do começo desse artigo, descobrimos que o &lt;code&gt;arr1&lt;/code&gt; e &lt;code&gt;arr2&lt;/code&gt; são objetos e o &lt;code&gt;str&lt;/code&gt; é string logo a comparação de &lt;code&gt;arr1 == str&lt;/code&gt; cai na condição que o algoritmo de comparação de igualdade instituiu.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;typeof arr1 // object
typeof arr2 // object
typeof str // string
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Você ja deve está entendendo onde eu quero chegar... Vamos então entender nosso exemplo do início do artigo.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arr1 == str; // true
arr2 == str; // true
arr1 == arr2; // false
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Na primeira linha ele compara &lt;code&gt;arr1&lt;/code&gt;, que é um &lt;code&gt;object&lt;/code&gt;, com &lt;code&gt;str&lt;/code&gt; que é &lt;code&gt;string&lt;/code&gt;, então, antes de tudo, converte &lt;code&gt;arr1&lt;/code&gt; para &lt;code&gt;string&lt;/code&gt; e então comparando os dois valores temos o resultado de &lt;code&gt;true&lt;/code&gt; pois os dois valores são iguais no final. &lt;em&gt;E aqui quero abrir um parênteses para você entender melhor como ele faz essa conversão.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Todo valor do tipo objeto tem um método interno chamado &lt;code&gt;toString&lt;/code&gt; e é justamente esse metodo que o javaScript se utiliza para fazer as conversões por meio do Type Coercion de forma implícita. Mas nós também podemos fazer de forma explícita para ficar mais visível.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arr1.toString() // "1,2,3"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Olha só, se chamamos o método toString do objeto &lt;code&gt;arr1&lt;/code&gt; temos como resultado exatamente o mesmo valor da variável &lt;code&gt;str&lt;/code&gt; por isso o resultado da comparação de &lt;code&gt;arr1 == str é true&lt;/code&gt;, no fim eles possuem o mesmo valor. A mesmo coisa se aplica para &lt;code&gt;arr2 == str&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;A última linha de nosso exemplo diz que &lt;code&gt;arr1 == arr2 é false&lt;/code&gt; e isso acontece porque a especificação &lt;a href="https://262.ecma-international.org/5.1/#sec-11.9.3"&gt;11.9.3&lt;/a&gt; diz que ele só converte o valor do objeto caso um dos valores fosse &lt;code&gt;object&lt;/code&gt; e o outro &lt;code&gt;string&lt;/code&gt; ou &lt;code&gt;number&lt;/code&gt;. Nessa comparação que estamos fazendo agora os dois são &lt;code&gt;object&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;typeof arr1 // object
typeof arr2 // object
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Então essa comparação cai em outra condicional instituida pela especificação &lt;a href="https://262.ecma-international.org/5.1/#sec-11.9.3"&gt;11.9.3&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--cUIDEkSJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2zbn7ps4kwzeuiyrhg8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--cUIDEkSJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2zbn7ps4kwzeuiyrhg8.png" alt="especificação ecmascript 11.9.3" width="830" height="177"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Logo como ele não vai converter nem X e nem Y pois os dois são &lt;code&gt;object&lt;/code&gt; ele vai retorna &lt;code&gt;false&lt;/code&gt; pois o valor do objeto é ele próprio e cada objeto instanciado é diferente um do outro mesmo possuindo as mesmas propriedades.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Se quiser entender mais sobre objetos &lt;a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects"&gt;esse link&lt;/a&gt; pode te ajudar.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Por fim, vimos então que uma simples comparação &lt;code&gt;==&lt;/code&gt; passa por um algoritmo que vai:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Verificar os tipos dos valores dos parâmetros passados;&lt;/li&gt;
&lt;li&gt;Ver em qual condição se encaixam;&lt;/li&gt;
&lt;li&gt;Converter os tipos dos valores;&lt;/li&gt;
&lt;li&gt;Para só então comparar um com o outro.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;E se eu te mostrar novamente o mesmo exemplo do início desse artigo?&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let arr1 = [1,2,3];
let arr2 = [1,2,3];
let str = "1,2,3";

arr1 == str; // true
arr2 == str; // true
arr1 == arr2; // false
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Espero que olhando para ele agora não apenas venha na sua cabeça "não entendi mas é assim que funciona" mas que agora faça sentido para você o resultado de cada comparação entendendo o que acontece por trás dos panos e com isso possa melhorar os seus códigos.&lt;/p&gt;




&lt;h2&gt;
  
  
  Links úteis
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://262.ecma-international.org/5.1/#sec-11.9.3"&gt;Especificação do Algoritimo de comparação de igualdade&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://262.ecma-international.org/5.1/#sec-9.1"&gt;Especificação do metodo implícito ToPrimitive()&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://262.ecma-international.org/5.1/#sec-8.12.8"&gt;Especificação de como o JavaScript prioriza a conversão dos valores dos objetos&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Se esse post te ajudou em algo, deixa um comentário ou um Like pra ajudar no engajamento :D&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
