Coerção, Closures e Protótipos: As Mecânicas do JavaScript que Você Usa Sem Entender

// Cenário 1: string numérica vs número
// A spec converte a string para número antes de comparar (passo 5 do algoritmo)
console.log("42" == 42);       // true — ToNumber("42") === 42
console.log("042" == 42);      // true — ToNumber ignora zero à esquerda em decimal
console.log("0x2A" == 42);     // true — ToNumber parseia hexadecimal
 
// Cenário 2: null e undefined são iguais APENAS entre si
// Passo 2 e 3 do algoritmo: retorna true se um é null e outro undefined
console.log(null == undefined); // true
console.log(null == 0);         // false — null NÃO é convertido para número aqui
console.log(null == "");        // false — mesmo motivo
 
// Cenário 3: objetos vs primitivos
// A spec chama ToPrimitive no objeto, que invoca valueOf() e depois toString()
const createdAt = new Date("2025-01-15");
console.log(createdAt == "Wed Jan 15 2025 00:00:00 GMT+0000"); // true — toString() do Date
console.log(createdAt == 1736899200000); // false — porque toString() foi chamado, não valueOf()

// Checar null OU undefined com uma única comparação
// Isso é idiomático e mais legível que (value === null || value === undefined)
function getConfig(value) {
  if (value == null) {
    // Captura tanto null quanto undefined, nada mais
    return getDefaultConfig();
  }
  return parseConfig(value);
}

// Em contraste, typeof para undefined é seguro mas verboso
function getConfigVerbose(value) {
  if (value === null || value === undefined) {
    return getDefaultConfig();
  }
  return parseConfig(value);
}

function createCounter(initialValue) {
  // 'count' é alocado em um Context object, não na stack
  let count = initialValue;
 
  return {
    increment() {
      // Esta função retém referência ao Context que contém 'count'
      count += 1;
      return count;
    },
    getCount() {
      // Mesma referência ao MESMO Context object
      return count;
    },
  };
}
 
const counter = createCounter(0);
// Neste ponto, o stack frame de createCounter já foi destruído.
// Mas o Context com 'count' ainda existe na heap.
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2

// ❌ BUG: todas as callbacks referenciam o MESMO 'i'
function attachHandlers(buttons) {
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function () {
      // Quando o click acontece, o loop já terminou.
      // 'i' vale buttons.length para TODAS as callbacks.
      console.log("Botão clicado:", i);
    });
  }
}

// ✅ CORREÇÃO 1: let tem escopo de bloco — cada iteração cria um novo binding
function attachHandlers(buttons) {
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function () {
      // Cada iteração do for-let cria um novo 'i' no escopo do bloco.
      // A closure de cada callback referencia seu próprio 'i'.
      console.log("Botão clicado:", i);
    });
  }
}

// ✅ CORREÇÃO 2: IIFE cria um novo escopo por iteração (pré-ES6)
function attachHandlersLegacy(buttons) {
  for (var i = 0; i < buttons.length; i++) {
    (function (capturedIndex) {
      // 'capturedIndex' é um parâmetro local desta IIFE,
      // copiado por valor a cada iteração
      buttons[capturedIndex].addEventListener("click", function () {
        console.log("Botão clicado:", capturedIndex);
      });
    })(i);
  }
}

// ❌ BUG: 'this' vira undefined quando o método vira callback
class QueueProcessor {
  constructor(redisClient) {
    this.redis = redisClient;
    this.processedCount = 0;
  }
 
  async processJob(job) {
    // Ao executar, 'this' não aponta mais para a instância.
    // this.redis é undefined → TypeError silencioso no catch interno.
    await this.redis.zadd("processed", Date.now(), job.id);
    this.processedCount += 1;
  }
 
  start(queue) {
    // Quando processJob é passado como callback, perde o binding de 'this'.
    // A closure do .on() retém a REFERÊNCIA à função, não ao método bound.
    queue.on("job", this.processJob);
  }
}

// ✅ CORREÇÃO 1: .bind() cria uma nova função com 'this' fixo
class QueueProcessor {
  start(queue) {
    // bind retorna uma nova função. 'this' fica congelado.
    queue.on("job", this.processJob.bind(this));
  }
}
 
// ✅ CORREÇÃO 2: arrow function herda 'this' léxico do contexto
class QueueProcessor {
  // Campo de classe com arrow function: 'this' é capturado na instância
  processJob = async (job) => {
    await this.redis.zadd("processed", Date.now(), job.id);
    this.processedCount += 1;
  };
 
  start(queue) {
    // Agora pode passar direto, sem bind.
    queue.on("job", this.processJob);
  }
}
 
// ✅ CORREÇÃO 3: wrapper explícito preserva legibilidade
class QueueProcessor {
  start(queue) {
    queue.on("job", (job) => this.processJob(job));
    // A arrow function capturou 'this' do start() via escopo léxico.
  }
}

const user = {
  name: "Marcos",
  greet() {
    return `Olá, ${this.name}`;
  },
};
 
// Object.create estabelece [[Prototype]] sem invocar construtor
const admin = Object.create(user);
admin.role = "admin";
 
// Resolução: admin.role → encontrado em admin (próprio)
console.log(admin.role); // "admin"
 
// Resolução: admin.name → não encontrado em admin
//   → sobe para admin.[[Prototype]] (user) → encontrado
console.log(admin.name); // "Marcos"
 
// Resolução: admin.greet → mesma cadeia
console.log(admin.greet()); // "Olá, Marcos"
 
// Resolução: admin.toString → não em admin, não em user
//   → sobe para user.[[Prototype]] (Object.prototype) → encontrado
console.log(admin.toString()); // "[object Object]"

class Animal {
  constructor(name) {
    this.name = name;
  }
 
  speak() {
    return `${this.name} faz um som`;
  }
}
 
class Dog extends Animal {
  speak() {
    return `${this.name} late`;
  }
}
 
// O que a engine realmente monta:
// Dog.prototype.[[Prototype]] === Animal.prototype
// new Dog("Rex").[[Prototype]] === Dog.prototype
 
const rex = new Dog("Rex");
console.log(rex.speak()); // "Rex late" — encontrado em Dog.prototype
console.log(rex.hasOwnProperty("name")); // true — 'name' está na instância
console.log(rex.hasOwnProperty("speak")); // false — 'speak' está no prototype

// ❌ Serialização destrói a cadeia de protótipos
class Order {
  constructor(data) {
    this.id = data.id;
    this.total = data.total;
  }
 
  applyDiscount(percent) {
    this.total = this.total * (1 - percent / 100);
    return this;
  }
}
 
const order = new Order({ id: "abc-123", total: 299.9 });
const serialized = JSON.stringify(order);
const deserialized = JSON.parse(serialized);
 
console.log(deserialized instanceof Order); // false
// deserialized.applyDiscount(10); // TypeError: not a function

// ✅ Solução: factory function que reconstrói a instância
class Order {
  constructor(data) {
    this.id = data.id;
    this.total = data.total;
  }
 
  applyDiscount(percent) {
    this.total = this.total * (1 - percent / 100);
    return this;
  }
 
  // Método estático que reconstrói a cadeia de protótipos
  static fromJSON(raw) {
    const data = typeof raw === "string" ? JSON.parse(raw) : raw;
    return new Order(data);
  }
 
  // toJSON garante que a serialização inclua apenas dados
  toJSON() {
    return { id: this.id, total: this.total };
  }
}
 
// No consumer da fila:
const restored = Order.fromJSON(serialized);
console.log(restored instanceof Order); // true
restored.applyDiscount(10);
console.log(restored.total); // 269.91

// ❌ NUNCA faça isso — afeta TODOS os objetos do runtime
Object.prototype.isEmpty = function () {
  return Object.keys(this).length === 0;
};
 
// Agora todo for...in em qualquer objeto do sistema itera 'isEmpty'
const config = { port: 3000 };
for (const key in config) {
  // Imprime 'port' E 'isEmpty'
  console.log(key);
}

// ✅ Use função utilitária isolada
function isEmpty(obj) {
  return Object.keys(obj).length === 0;
}
 
// Ou, se precisa de método, use Symbol para evitar colisão
const isEmptySymbol = Symbol("isEmpty");
Object.defineProperty(Object.prototype, isEmptySymbol, {
  value: function () {
    return Object.keys(this).length === 0;
  },
  enumerable: false, // Não aparece em for...in
});

// ❌ A closure retém referência ao 'hugeData' inteiro,
// mesmo que só use 'hugeData.summary'
function processReport(hugeData) {
  const summary = hugeData.summary;
 
  return function formatForUI() {
    // V8 PODE otimizar e não reter hugeData se detectar que não é usado.
    // Mas em builds com eval(), debugger, ou with(), essa otimização não acontece.
    return `Relatório: ${summary}`;
  };
}

// ✅ Extraia apenas o que precisa ANTES de criar a closure
function processReport(hugeData) {
  // Cópia explícita do valor necessário
  const summary = String(hugeData.summary);
 
  // hugeData não é referenciado na closure — será coletado pelo GC
  return function formatForUI() {
    return `Relatório: ${summary}`;
  };
}

// ❌ Coerção implícita em validação de formulário
function validateAge(input) {
  // input vem de um <input type="text">, sempre string
  if (input > 0 && input < 150) {
    // "12abc" > 0 é false (NaN > 0 → false), MAS
    // "" > 0 é false e "" < 150 é true... espera, ambos false.
    // O problema: "  " (espaço) é convertido para 0, passa no < 150
    return true;
  }
  return false;
}
 
console.log(validateAge("  ")); // false (0 > 0 é false) — ok por acidente
console.log(validateAge("25")); // true — ok
console.log(validateAge("0"));  // false — bug se 0 for válido no contexto

// ✅ Parse explícito com validação de tipo
function validateAge(input) {
  const parsed = Number(input);
 
  // Number("") retorna 0, Number("  ") retorna 0, Number("12abc") retorna NaN
  // Number.isFinite descarta NaN e Infinity
  if (!Number.isFinite(parsed)) {
    return false;
  }
 
  // Agora a comparação é entre números, sem coerção
  return parsed >= 0 && parsed < 150;
}