Type Coercion: Como o JavaScript Converte Tipos Automaticamente (e Por Que `"5" + 3` é `"53"`)

┌─────────────────────────────────────────────────────────────────────────┐│                    COERÇÃO DE TIPO: O CAMALEÃO                           │├─────────────────────────────────────────────────────────────────────────┤│                                                                          ││        ┌─────────┐                    ┌─────────┐                        ││        │   "5"   │ ──── + 3 ────────► │  "53"   │  String venceu!        ││        │ string  │                    │ string  │                        ││        └─────────┘                    └─────────┘                        ││                                                                          ││        ┌─────────┐                    ┌─────────┐                        ││        │   "5"   │ ──── - 3 ────────► │    2    │  Number venceu!        ││        │ string  │                    │ number  │                        ││        └─────────┘                    └─────────┘                        ││                                                                          ││        Mesmos valores, operadores diferentes, resultados diferentes!       ││                                                                          │└─────────────────────────────────────────────────────────────────────────┘

// VOCÊ decide quando e como converterNumber("42")       // 42String(42)         // "42"Boolean(1)         // true parseInt("42px")   // 42parseFloat("3.14") // 3.14

// JavaScript "ajuda" sem perguntar"5" + 3           // "53" (número virou string)"5" - 3           // 2 (string virou número) if ("hello") {}   // string virou boolean (true) 5 == "5"          // true (tipos foram coagidos)

// Em JavaScript, variáveis podem guardar qualquer tipolet x = 42;       // x é um númerox = "hello";      // agora x é uma stringx = true;         // agora x é um boolean // Então o que acontece aqui?let result = x + 10;  // JavaScript deve decidir como lidar com isso

┌─────────────────────────────────────────────────────────────────────────┐│                    OS TRÊS DESTINOS DE CONVERSÃO                         │├─────────────────────────────────────────────────────────────────────────┤│                                                                          ││                      ┌──────────────────────┐                            ││                      │    QUALQUER VALOR    │                            ││                      │  (string, number,    │                            ││                      │   object, array...)  │                            ││                      └──────────┬───────────┘                            ││                                 │                                        ││                ┌────────────────┼────────────────┐                       ││                ▼                ▼                ▼                       ││          ┌──────────┐    ┌──────────┐    ┌──────────┐                    ││          │  String  │    │  Number  │    │ Boolean  │                    ││          │   "42"   │    │    42    │    │   true   │                    ││          └──────────┘    └──────────┘    └──────────┘                    ││                                                                          ││          Estes são os ÚNICOS três destinos possíveis!                     ││                                                                          │└─────────────────────────────────────────────────────────────────────────┘

// Conversão explícitaString(123)           // "123"String(true)          // "true"(123).toString()      // "123" // Conversão implícita123 + ""              // "123" (concatenação com string vazia)`Valor: ${123}`       // "Valor: 123" (template literal)"Hello " + 123        // "Hello 123" (+ com string)

// Com dois números: adição5 + 3               // 8 // Com qualquer string envolvida: concatenação"5" + 3             // "53" (3 vira "3")5 + "3"             // "53" (5 vira "5")"Hello" + " World"  // "Hello World" // A ordem importa com múltiplos operandos!1 + 2 + "3"         // "33" (1+2=3, depois 3+"3"="33")"1" + 2 + 3         // "123" (todos viram strings da esquerda para direita)

// Perigoso: input do usuário é sempre string!const userInput = "5";const result = userInput + 10;  // "510", não 15! // Seguro: converta primeiroconst result = Number(userInput) + 10;  // 15

// Conversão explícitaNumber("42")          // 42parseInt("42px")      // 42 (para no não-dígito)parseFloat("3.14")    // 3.14+"42"                 // 42 (truque do + unário) // Conversão implícita"6" - 2               // 4 (subtração)"6" * 2               // 12 (multiplicação)"6" / 2               // 3 (divisão)"6" % 4               // 2 (módulo)"10" > 5              // true (comparação)+"42"                 // 42 (+ unário)

Number(null)       // 0Number(undefined)  // NaN null + 5           // 5undefined + 5      // NaN

"6" - "2"    // 4 (ambos viram números)"6" * "2"    // 12"6" / "2"    // 3"10" % "3"   // 1 // É por isso que - e + se comportam diferente!"5" + 3      // "53" (concatenação)"5" - 3      // 2 (matemática)

+"42"        // 42+true        // 1+false       // 0+null        // 0+undefined   // NaN+"hello"     // NaN+""          // 0

// Conversão explícitaBoolean(1)            // trueBoolean(0)            // false!!value               // truque da dupla negação // Conversão implícitaif (value) { }        // verificação de condiçãowhile (value) { }     // condição de loopvalue ? "yes" : "no"  // operador ternáriovalue && doSomething() // AND lógicovalue || defaultValue  // OR lógico!value                // NOT lógico

// OS OITO FALSYBoolean(false)        // false (óbvio)Boolean(0)            // falseBoolean(-0)           // false (sim, -0 existe)Boolean(0n)           // false (zero BigInt)Boolean("")           // false (string vazia)Boolean(null)         // falseBoolean(undefined)    // falseBoolean(NaN)          // false

// Todos estes são TRUE!Boolean(true)         // true (óbvio)Boolean(1)            // trueBoolean(-1)           // true (números negativos!)Boolean("hello")      // trueBoolean("0")          // true (string não vazia!)Boolean("false")      // true (string não vazia!)Boolean([])           // true (array vazio!)Boolean({})           // true (objeto vazio!)Boolean(function(){}) // trueBoolean(new Date())   // trueBoolean(Infinity)     // trueBoolean(-Infinity)    // true

// Estes pegam TODO MUNDO:Boolean("0")          // true (é uma string não vazia!)Boolean("false")      // true (é uma string não vazia!)Boolean([])           // true (arrays são objetos, objetos são truthy)Boolean({})           // true (mesmo objetos vazios) // Se quiser verificar array vazio, faça assim:if (arr.length) { }   // verifica se o array tem itensif (arr.length === 0) { }  // verifica se o array está vazio

// || retorna o PRIMEIRO valor truthy (ou o último valor)"hello" || "world"    // "hello""" || "world"         // "world""" || 0 || null || "yes"  // "yes" // && retorna o PRIMEIRO valor falsy (ou o último valor)"hello" && "world"    // "world""" && "world"         // ""1 && 2 && 3           // 3 // Isso é útil para defaults!const name = userInput || "Anônimo";const display = user && user.name;

// Arrays — toString() retorna elementos unidos[1, 2, 3].toString()   // "1,2,3"[1, 2, 3] + ""         // "1,2,3"[1, 2, 3] - 0          // NaN (não converte "1,2,3" para número) [].toString()          // ""[] + ""                // ""[] - 0                 // 0 (string vazia → 0) [1].toString()         // "1"[1] - 0                // 1 // Objetos simples — toString() retorna "[object Object]"({}).toString()        // "[object Object]"({}) + ""              // "[object Object]" // Dates — caso especial, preferem string para operador +const date = new Date(0);date.toString()        // "Thu Jan 01 1970 ..."date.valueOf()         // 0 (timestamp em ms) date + ""              // "Thu Jan 01 1970 ..." (usa toString)date - 0               // 0 (usa valueOf)

const price = {  amount: 99.99,  currency: "USD",    valueOf() {    return this.amount;  },    toString() {    return `${this.currency} ${this.amount}`;  }}; // Conversão numérica usa valueOf()price - 0              // 99.99price * 2              // 199.98+price                 // 99.99 // Conversão string usa toString()String(price)          // "USD 99.99"`Preço: ${price}`      // "Preço: USD 99.99" // + é ambíguo, usa valueOf() se retornar primitivoprice + ""             // "99.99" (valueOf retornou número, depois → string)

const obj = {  [Symbol.toPrimitive](hint) {    console.log(`Convertendo com hint: ${hint}`);        if (hint === "number") {      return 42;    }    if (hint === "string") {      return "quarenta e dois";    }    // hint === "default"    return "valor padrão";  }}; +obj           // 42 (hint: "number")`${obj}`       // "quarenta e dois" (hint: "string")obj + ""       // "valor padrão" (hint: "default")

5 == 5           // true"hello" == "hello"  // true

null == undefined    // truenull == null         // truenull == 0            // false (regra especial!)null == ""           // false

5 == "5"// vira: 5 == 5// resultado: true

true == "1"// passo 1: 1 == "1" (true → 1)// passo 2: 1 == 1 (string → number)// resultado: true true == "true"// passo 1: 1 == "true" (true → 1)// passo 2: 1 == NaN ("true" → NaN)// resultado: false (surpresa!)

[1] == 1// passo 1: "1" == 1 (array → string "1")// passo 2: 1 == 1 (string → number)// resultado: true

// Exemplo 1: "5" == 5"5" == 5// String vs Number → converte string para número// 5 == 5// Resultado: true // Exemplo 2: true == "1"true == "1"// Boolean envolvido → converte boolean para número primeiro// 1 == "1"// Number vs String → converte string para número// 1 == 1// Resultado: true // Exemplo 3: [] == false[] == false// Boolean envolvido → converte boolean para número primeiro// [] == 0// Objeto vs Number → converte objeto para primitivo// "" == 0 (array vazio → string vazia)// String vs Number → converte string para número// 0 == 0// Resultado: true // Exemplo 4: [] == ![][] == ![]// Primeiro, avalia ![] → false (arrays são truthy)// [] == false// Boolean envolvido → false vira 0// [] == 0// Objeto vs Number → [] vira ""// "" == 0// String vs Number → "" vira 0// 0 == 0// Resultado: true (sim, de verdade!)

5 === "5"     // false (tipos diferentes)5 == "5"      // true (coagido) null === undefined  // falsenull == undefined   // true

"5" + 3         // "53" (concatenação de string)"5" - 3         // 2 (matemática!) // Por quê? + faz adição E concatenação// Se qualquer operando for string, concatena// - só faz subtração, então converte para números

[] + []         // "" // Ambos arrays → "", depois "" + "" = "" [] + {}         // "[object Object]"// [] → "", {} → "[object Object]" {} + []         // 0 (no console do navegador!)// {} é interpretado como bloco vazio, depois +[] = 0// Envolva em parênteses para corrigir: ({}) + [] = "[object Object]"

true + true     // 2 (1 + 1)true + false    // 1 (1 + 0)true - true     // 0 (1 - 1) // Booleans convertem para 1 (true) ou 0 (false)

[] == ![]       // true // Passo a passo:// 1. ![] → false (arrays são truthy, negado = false)// 2. [] == false// 3. [] == 0 (boolean → number)// 4. "" == 0 (array → string)// 5. 0 == 0 (string → number)// 6. true! // Enquanto isso...[] === ![]      // false (tipos diferentes, sem coerção)

"foo" + + "bar"   // "fooNaN" // Passo a passo:// 1. +"bar" é avaliado primeiro (+ unário)// 2. +"bar" → NaN (não converte "bar" para número)// 3. "foo" + NaN → "fooNaN"

NaN === NaN     // falseNaN == NaN      // false // NaN é o único valor em JavaScript não igual a si mesmo!// Isso é por design (spec IEEE 754) // Como verificar NaN:Number.isNaN(NaN)     // true (forma correta)isNaN(NaN)            // trueisNaN("hello")        // true (errado! converte primeiro)Number.isNaN("hello") // false (correto)

typeof NaN        // "number" (wat)typeof null       // "object" (bug histórico)typeof []         // "object" (arrays são objetos)typeof function(){} // "function" (caso especial)

[1, 2] + [3, 4]   // "1,23,4" // Arrays convertem para strings:// [1, 2] → "1,2"// [3, 4] → "3,4"// "1,2" + "3,4" → "1,23,4" // Para combinar arrays de verdade:[...[1, 2], ...[3, 4]]  // [1, 2, 3, 4][1, 2].concat([3, 4])   // [1, 2, 3, 4]

// 1. Verificar null OU undefined de uma vezif (value == null) {  // Isso pega AMBOS null e undefined  // Muito mais limpo que: if (value === null || value === undefined)} // 2. Contexto booleano é natural e legívelif (user) {  // Verificação truthy — totalmente ok} if (items.length) {  // Verificar se array tem itens — totalmente ok} // 3. Conversão rápida para stringconst str = value + "";// ouconst str = String(value);// ouconst str = `${value}`; // 4. Conversão rápida para númeroconst num = +value;// ouconst num = Number(value);

// RUIM: Confiar em == para comparações type-unsafeif (x == true) { }  // Não faça isso!if (x) { }          // Faça isso em vez disso // RUIM: Usar == com 0 ou ""if (x == 0) { }     // Combina com "", mas não com null (null == 0 é false!)if (x === 0) { }    // Intenção clara // RUIM: Verificação truthy quando precisa de tipo específicofunction process(count) {  if (!count) return;  // Falha para count = 0!  // ...} function process(count) {  if (typeof count !== "number") return;  // Melhor  // ...}