Equality Operators: `==` vs `===` — Como o JavaScript Realmente Compara Valores

// A mesma comparação, três resultados diferentesconst num = 1;const str = "1"; console.log(num == str);           // true  (coage string para número)console.log(num === str);          // false (tipos diferentes)console.log(Object.is(num, str));  // false (tipos diferentes)

        CORREÇÃO RELAXADA (==)              CORREÇÃO ESTRITA (===)      "A resposta está correta?"          "Está exatamente certa?"    ┌─────────────┐   ┌─────────────┐    ┌─────────────┐   ┌─────────────┐    │      4      │ = │    "4"      │    │      4      │ ≠ │    "4"      │    │  (number)   │   │  (string)   │    │  (number)   │   │  (string)   │    └─────────────┘   └─────────────┘    └─────────────┘   └─────────────┘          │                 │                  │                 │          └────────┬────────┘                  └────────┬────────┘                   ▼                                    ▼          "Perto o suficiente!" ✓                    "Tipos diferentes!" ✗

5 == 5              // Mesmo tipo (number), compara diretamente → true"hello" == "hello"  // Mesmo tipo (string), compara diretamente → true

null == undefined    // true (caso especial!)undefined == null    // true

5 == "5"    // "5" → 5, depois 5 == 5 → true0 == ""     // "" → 0, depois 0 == 0 → true42 == "42"  // "42" → 42, depois 42 == 42 → true

10n == "10"   // "10" → 10n, depois 10n == 10n → true

true == 1     // true → 1, depois 1 == 1 → truefalse == 0    // false → 0, depois 0 == 0 → truetrue == "1"   // true → 1, depois 1 == "1" → 1 == 1 → true

[1] == 1       // [1] → "1" → 1, depois 1 == 1 → true[""] == 0      // [""] → "" → 0, depois 0 == 0 → true

10n == 10      // Compara valores: 10 == 10 → true10n == 10.5    // 10 !== 10.5 → false

null == 0             // false (null só iguala undefined)undefined == 0        // falseSymbol() == Symbol()  // false (Symbols são sempre únicos)

                              x == y                                 │                    ┌────────────┴────────────┐                    ▼                         ▼               Mesmo tipo?                Tipos diferentes?                    │                         │                   SIM                       SIM                    │                         │                    ▼                         ▼            Compara valores           ┌────────┴────────┐            (como ===)               │                 │                                     ▼                 ▼                              null == undefined?   Aplica regras                                     │              de coerção                                    SIM                 │                                     │                  ▼                                     ▼             Converte tipos                                   true            e compara                                                     novamente

// String convertida para Number1 == "1"              // true  ("1" → 1)0 == ""               // true  ("" → 0)0 == "0"              // true  ("0" → 0)100 == "1e2"          // true  ("1e2" → 100) // Mas string com string é comparação direta"" == "0"             // false (ambas strings, valores diferentes) // Conversões NaNNaN == "NaN"          // false (NaN ≠ qualquer coisa, inclusive a si)0 == "hello"          // false ("hello" → NaN, 0 ≠ NaN)

// Booleans viram 0 ou 1 PRIMEIROtrue == 1             // true  (true → 1)false == 0            // true  (false → 0)true == "1"           // true  (true → 1, "1" → 1)false == ""           // true  (false → 0, "" → 0) // Por isso estes confundem:true == "true"        // false! (true → 1, "true" → NaN)false == "false"      // false! (false → 0, "false" → NaN) // E estes parecem errados:true == 2             // false (true → 1, 1 ≠ 2)true == "2"           // false (true → 1, "2" → 2, 1 ≠ 2)

// A relação especialnull == undefined     // true  (regra especial!)undefined == null     // true // Mas não igualam mais nadanull == 0             // falsenull == false         // falsenull == ""            // falseundefined == 0        // falseundefined == false    // falseundefined == ""       // false // Isso é útil de verdade!let value = null;if (value == null) {  // Pega AMBOS null E undefined  console.log("Valor é nullish");}

// Arrays convertem via ToPrimitive (geralmente toString)[] == false           // true  ([] → "" → 0, false → 0)[] == 0               // true  ([] → "" → 0)[] == ""              // true  ([] → "")[1] == 1              // true  ([1] → "1" → 1)[1] == "1"            // true  ([1] → "1")[1,2] == "1,2"        // true  ([1,2] → "1,2") // Gotcha do array vazio[] == ![]             // true! (veja explicação abaixo) // Objetos com valueOf/toStringlet obj = { valueOf: () => 42 };obj == 42             // true  (obj.valueOf() → 42)

0 == 0    // true!

function greet(name) {  if (name == null) {    return "Olá, estranho!";  }  return `Olá, ${name}!`;} greet(null);       // "Olá, estranho!"greet(undefined);  // "Olá, estranho!"greet("Alice");    // "Olá, Alice!"greet("");         // "Olá, !"  (string vazia NÃO é null)greet(0);          // "Olá, 0!" (0 NÃO é null)

1 === "1"          // false (number vs string)true === 1         // false (boolean vs number)null === undefined // false (null vs undefined)

42 === 42              // trueNaN === NaN            // false (!)+0 === -0              // trueInfinity === Infinity  // true

"hello" === "hello"   // true"hello" === "Hello"   // false (case sensitive)"hello" === "hello "  // false (comprimentos diferentes)

true === true     // truefalse === false   // truetrue === false    // false

10n === 10n       // true10n === 20n       // false

const sym = Symbol("id");sym === sym                    // trueSymbol("id") === Symbol("id")  // false (symbols diferentes!)

const obj = { a: 1 };obj === obj       // true (mesma referência){ a: 1 } === { a: 1 }  // false (objetos diferentes!)[] === []         // false (arrays diferentes!)

null === null           // trueundefined === undefined // truenull === undefined      // false

                           x === y                              │              ┌───────────────┴───────────────┐              │          Mesmo tipo?           │              └───────────────┬───────────────┘                     │                 │                    NÃO               SIM                     │                 │                     ▼                 ▼                  false          Ambos NaN?                                      │                              ┌───────┴───────┐                             SIM             NÃO                              │               │                              ▼               ▼                           false        Mesmo valor?                     (NaN nunca iguala         │                        nada!)         ┌───────┴───────┐                                      SIM             NÃO                                       │               │                                       ▼               ▼                                     true           false

// Todos false (tipos diferentes)1 === "1"              // false0 === ""               // falsetrue === 1             // falsefalse === 0            // falsenull === undefined     // false[] === ""              // false // Todos true (mesmo tipo, mesmo valor)1 === 1                // true"hello" === "hello"    // truetrue === true          // truenull === null          // trueundefined === undefined // true

NaN === NaN           // false! // NaN não iguala nada, nem a si mesmo!// Isso é por design (spec IEEE 754) // Como verificar NaN:Number.isNaN(NaN)     // true (recomendado)isNaN(NaN)            // true (mas tem quirks)Object.is(NaN, NaN)   // true (ES6) // O quirk do isNaN():isNaN("hello")        // true! (converte primeiro)Number.isNaN("hello") // false (correto)

+0 === -0             // true-0 === 0              // true // Mas SÃO diferentes! Observe:1 / +0                // Infinity1 / -0                // -Infinity // Como distinguir:Object.is(+0, -0)     // false (ES6)1 / +0 === 1 / -0     // false (Infinity vs -Infinity)

const obj1 = { name: "Alice" };const obj2 = { name: "Alice" };const obj3 = obj1; obj1 === obj2    // false (objetos diferentes na memória)obj1 === obj3    // true  (mesma referência) const arr1 = [1, 2, 3];const arr2 = [1, 2, 3];const arr3 = arr1; arr1 === arr2    // false (arrays diferentes)arr1 === arr3    // true  (mesma referência)

VISUALIZAÇÃO NA MEMÓRIA:obj1 ──────┐           ├──► { name: "Alice" }    (Objeto A)obj3 ──────┘obj2 ──────────► { name: "Alice" }   (Objeto B)obj1 === obj3 → true  (ambos apontam para Objeto A)obj1 === obj2 → false (objetos diferentes, mesmo conteúdo)

// Os dois casos onde === está "errado"NaN === NaN       // false (mas NaN É NaN!)+0 === -0         // true  (mas SÃO diferentes!) // Object.is() corrige ambosObject.is(NaN, NaN)   // true ✓Object.is(+0, -0)     // false ✓

// 1. Verificar NaN (alternativa a Number.isNaN)function isReallyNaN(value) {  return Object.is(value, NaN);} // 2. Distinguir +0 de -0 (raro, mas necessário em math/física)function isNegativeZero(value) {  return Object.is(value, -0);} // 3. Implementar comparação SameValue (como em Map/Set)const map = new Map();map.set(NaN, "valor");map.get(NaN);  // "valor" (NaN funciona como chave!)

typeof operandtypeof(operand)  // Ambas as formas são válidas

typeof null    // "object" — Espera, o quê?!

// Sempre verifique null explicitamentefunction getType(value) {  if (value === null) return "null";  return typeof value;} if (value !== null && typeof value === "object") {  // É definitivamente um objeto (não null)}

typeof []           // "object"typeof [1, 2, 3]    // "object"

Array.isArray([])           // true (recomendado)Array.isArray({})           // falseObject.prototype.toString.call([])  // "[object Array]"

typeof function() {}    // "function"typeof (() => {})       // "function"typeof class {}         // "function"

console.log(undeclaredVar);  // ReferenceError!typeof undeclaredVar         // "undefined" (sem erro!)

if (typeof jQuery !== "undefined") {  // jQuery está disponível}

typeof NaN          // "number"

Number.isNaN(NaN)  // true

Array.isArray(value)           // true só para arraysNumber.isNaN(value)            // true só para NaN (sem coerção)Number.isFinite(value)         // true para números finitosNumber.isInteger(value)        // true para inteirosNumber.isSafeInteger(value)    // true para inteiros seguros

const getType = (value) =>  Object.prototype.toString.call(value).slice(8, -1); getType(null)           // "Null"getType([])             // "Array"getType({})             // "Object"getType(new Date())     // "Date"getType(/regex/)        // "RegExp"getType(42)             // "Number"getType("hello")        // "String"

function getType(value) {  if (value === null) return "null";  const type = typeof value;  if (type !== "object" && type !== "function") return type;  const tag = Object.prototype.toString.call(value);  return tag.slice(8, -1).toLowerCase();} getType(null)    // "null"getType([])      // "array"getType({})      // "object"

                    Precisa comparar dois valores?                              │                              ▼              ┌───────────────────────────────┐              │ Verificando null/undefined?     │              └───────────────────────────────┘                      │               │                     SIM             NÃO                      │               │                      ▼               ▼               ┌──────────┐   ┌───────────────────┐               │ == null  │   │ Precisa NaN ou ±0?│               └──────────┘   └───────────────────┘                                  │           │                                 SIM          NÃO                                  │           │                                  ▼           ▼                            ┌──────────┐ ┌─────────┐                            │Object.is │ │   ===   │                            │    ou    │ └─────────┘                            │Number.   │                            │ isNaN()  │                            └──────────┘

// .eslintrc.jsmodule.exports = {  rules: {    // Exige === e !== exceto para comparações com null    "eqeqeq": ["error", "always", { "null": "ignore" }]  }};

// Permitidoif (value === 5) { }      // Usando ===if (value == null) { }    // Exceção para null // Erroif (value == 5) { }       // Deveria usar ===

const user1 = { name: "Alice" };const user2 = { name: "Alice" }; if (user1 === user2) {  console.log("Mesmo usuário!");  // Nunca executa!}

if (user1.name === user2.name) { }  // Compara propriedadesif (JSON.stringify(user1) === JSON.stringify(user2)) { }  // Objetos simplesimport { isEqual } from 'lodash';if (isEqual(user1, user2)) { }  // Biblioteca

if ([] == false) { }      // true! (mas [] é truthy)if ("0" == false) { }     // true! (mas "0" é truthy)if (" " == false) { }     // false (mas " " é truthy)

if (value === false) { }  // Só true para false realif (!value) { }           // Verificação falsyif (value) { }            // Verificação truthy

const result = parseInt("hello");if (result === NaN) { }  // Nunca executa!

if (Number.isNaN(result)) { }  // Funciona!if (Object.is(result, NaN)) { }  // Também funciona!

function processObject(obj) {  if (typeof obj === "object") {    console.log(obj.property);  // TypeError se null!  }}processObject(null);  // Quebra!

if (obj !== null && typeof obj === "object") { }console.log(obj?.property);  // Optional chaining (ES2020)

console.log("10" > "9");    // false! (comparação lexicográfica)

console.log(Number("10") > Number("9"));  // trueconsole.log(+"10" > +"9");                // true["10", "9", "2"].sort((a, b) => a - b);  // ["2", "9", "10"]

const arr = [];console.log(arr == false);        // trueconsole.log(arr ? "sim" : "não"); // "sim"// arr iguala false mas é truthy?!

if (arr.length === 0) { console.log("Array vazio"); }if (!arr.length) { console.log("Array vazio"); }

if (value == null) {  // Pega AMBOS null E undefined} if (value === null || value === undefined) {  // Mesmo resultado, mas mais verboso}

5 === 10          // false (ambos numbers, valores diferentes)"hello" === "hi"  // false (ambas strings, valores diferentes)5 === "5"         // false (tipos diferentes — comparação de valor nem tentada)

typeof null         // "object" — bug famoso de 1995!typeof []           // "object" — arrays são objetostypeof NaN          // "number"typeof function(){} // "function" — mas funções SÃO objetos!

{ a: 1 } === { a: 1 }  // false — objetos diferentes na memória![] === []              // false(() => {}) === (() => {})  // false const obj = { a: 1 };obj === obj            // true — mesma referência

typeof NaN  // "number" — NaN É um tipo number! 0 / 0           // NaNMath.sqrt(-1)   // NaNparseInt("xyz") // NaN

"hello" == true   // false!2 == true         // false![] == true        // false! if ("hello") { }  // executaif (2) { }        // executaif ([]) { }       // executa