Comportamentos estranhos em JavaScript

Mamãe, não precisa mais trabalhar na fábrica, seu filho triunfou, ele é um gênio!

O Filho: “1” + 1 -> resultado: 11. oxi, era pra ser igual a 2

Quem nunca? kkk

haha, memes a parte, agora vamos entender por que acontece esse tipo de comportamento em JavaScript. Observe os seguintes exemplos de código:

exemplo 1: console.log(“1” - 1) // resultado: 0.

exemplo 2: console.log(“1” - “1”) // resultado: 0.

exemplo 3: console.log(“1” + 1) // resultado: 11. WTF?!

exemplo 4: console.log(“1” - “A”) // resultado: NaN.

Por que os dois primeros exemplos o resultado está correto e nos dois últimos exemplos dão um resultado “errado”?

A linguagem JavaScript é uma linguagem de tipagem dinâmica, isso significa que ela é uma linguagem flexível, a grosso modo, ela tenta fazer por conta própria o melhor que ela pode, para que o nosso programa não “quebre”. Como?

Observe que no exemplo 1, estamos tentando fazer uma subtração com o operador aritmético “-”, em JavaScript, esse operador só tem a função de subtrair, então quando JavaScript ler esse código ela diz: huuum… não tem como eu subtrair o tipo de dado string pelo tipo de dado number, qual o melhor que eu posso fazer nesse caso para que o programa não quebre? Vou tentar converter o valor da string em um number e aí sim fazer a operação. No segundo exemplo a mesma coisa, ela converte o valor das strings em um number e consegue fazer a operação esperada por nós.

Aí você me pergunta:
Ué?! 🤔 e por que nos dois últimos exemplos ela não converteu as strings para number?

Vamos lá, no exemplo 3 estamos tentando fazer uma adição com o operador aritmético “+”, aqui está o bug, em JavaScript, esse operador tem duas funções, adição e concatenação. Lembra que eu disse que JavaScript tenta fazer o melhor que ela pode para não deixar nosso programa quebrar? Então, no exemplo 3 ela diz: huuum… somar o tipo de dado string com o tipo de dado number, não é uma operação válida, acho que o programador está querendo concatenar (juntar) esses valores, vou converter o number em string e fazer a concatenação. Por isso o resultado é 11. Para termos o resultado 2 como gostaríamos, podemos converter a string em um number usando a classe global “Number”, dessa maneira: console.log(Number(“1”) + 1).

Já no último exemplo, como a única função do operador “-” é subtrair, JavaScript vai tentar converter as strings em number para fazer a subtração, o VALOR da string “1” é um number, mas o valor da string “A” não é um number, logo, o resultado dessa conversão será NaN (Not a Number), então a operação final que JavaScript vai tentar será: 1 - NaN, e qualquer operação matemática que tem NaN, resulta em NaN. Espero ter te ajudado a entender por que acontece esse tipo de comportamento em JavaScript.

E como eu aprendi isso? Aprendi isso quando li o livro “JavaScript – O guia definitivo por David Flanagan” (recomendo muito)