JavaScript é uma linguagem onde as coisas às vezes funcionam de maneiras surpreendentes ou até estranhas. Uma dessas surpresas ocorre quando você mistura números e strings em cálculos. A primeira coisa que você provavelmente tentará é adicionar um número e uma string. Em JavaScript, o operador + tem dupla função. Ele lida tanto com adição e concatenação de strings, que é uma forma de juntar duas strings. Quando você usa + com um número e uma string, o JavaScript decide tratá-los ambos como strings e os junta. Se você verificar o tipo do resultado com o operador typeof, verá que é realmente uma string:

const result = 5 + '10';

console.log(result); // 510
console.log(typeof result); // string

O que você acha que vai acontecer se você trocar a ordem de 5 e '10'?

const result = '10' + 5;

console.log(result); // 105
console.log(typeof result); // string

Você pode ver que a mesma coisa aconteceu. JavaScript vê uma string em '10' e um número em 5, então ele converte o número para uma string e os concatena. This is known as type coercion. Coerção de tipo é quando um valor de um tipo de dado é convertido em outro. As coisas ficam mais interessantes quando você tenta realizar outras operações aritméticas como subtração, multiplicação ou divisão com uma string e um número. Nesses casos, o JavaScript tenta converter a string em um número antes de fazer a matemática – outra coerção de tipo! Aqui está o que acontece:

const subtractionResult = '10' - 5;
console.log(subtractionResult); // 5
console.log(typeof subtractionResult); // number

const multiplicationResult = '10' * 2;
console.log(multiplicationResult); // 20
console.log(typeof multiplicationResult); // number

const divisionResult = '20' / 2;
console.log(divisionResult); // 10
console.log(typeof divisionResult); // number

Nos exemplos acima, o JavaScript converte com sucesso a string '10' ou '20' para um número e então realiza o cálculo. Como resultado, '10' - 5 gera 5, '10' * 2 dá 20 e '20' / 2 resulta em 10. Mas e se a string não parecer um número? Vamos ver o que acontece nesse caso:

const subtractionResult = 'abc' - 5;
console.log(subtractionResult); // NaN
console.log(typeof subtractionResult); // number

const multiplicationResult = 'abc' * 2;
console.log(multiplicationResult); // NaN
console.log(typeof multiplicationResult); // number

const divisionResult = 'abc' / 2;
console.log(divisionResult); // NaN
console.log(typeof divisionResult); // number

Nos exemplos acima, a string 'abc' não representa um valor numérico válido, então o JavaScript não pode convertê-la em um número significativo. Quando essa conversão falha, JavaScript retorna NaN, que significa "Not a Number". NaN é um valor especial do tipo Number que representa um número inválido ou não representável. E se você realizar operações aritméticas com um booleano (true ou false)? Vamos ver o que acontece. JavaScript trata booleanos como números em operações matemáticas: true se torna 1 e false se torna 0.

const result1 = true + 1;
console.log(result1); // 2
console.log(typeof result1); // number

const result2 = false + 1;
console.log(result2); // 1
console.log(typeof result2); // number

const result3 = 'Hello' + true;
console.log(result3); // "Hellotrue"
console.log(typeof result3); // string

Nos dois primeiros exemplos, true + 1 resultou em 2 e false + 1 resultou em 1. No terceiro exemplo, 'Hello' + true, o JavaScript converteu true para uma string e a concatenou com 'Hello', resultando em 'Hellotrue', que é uma string. Para null e undefined, o JavaScript trata null como 0 e undefined como NaN em operações matemáticas:

const result1 = null + 5;
console.log(result1); // 5
console.log(typeof result1); // number

const result2 = undefined + 5;
console.log(result2); // NaN
console.log(typeof result2); // number

JavaScript frequentemente realiza coerção de tipo, convertendo automaticamente tipos de dados como números, strings e booleanos de maneiras às vezes inesperadas. Entender essas conversões é crucial para evitar bugs e escrever código robusto em seus projetos.