Como comparar dois objetos em JavaScript: Métodos e soluções

Como comparar dois objetos em JavaScript?

Comparar dois objetos em JavaScript não é tão simples quanto comparar valores primitivos como números ou strings. Isso ocorre porque, em JavaScript, objetos são armazenados por referência e não por valor. Ou seja, quando você cria dois objetos com os mesmos valores, eles ainda são referências diferentes na memória. Para comparar dois objetos corretamente, você precisará verificar se suas propriedades e valores são iguais. Vamos explorar algumas abordagens comuns para realizar essa comparação.

Comparando referências de objetos

Por padrão, ao comparar dois objetos em JavaScript, você está comparando suas referências na memória, e não o conteúdo real dos objetos. Isso significa que, mesmo que os objetos tenham as mesmas propriedades e valores, eles serão considerados diferentes se forem referências distintas.

Exemplo de comparação de referências:

let obj1 = { nome: 'João', idade: 25 };
let obj2 = { nome: 'João', idade: 25 };
let obj3 = obj1;
console.log(obj1 === obj2);  // Exibe false
console.log(obj1 === obj3);  // Exibe true

Neste exemplo, obj1 e obj2 têm as mesmas propriedades e valores, mas como são objetos distintos na memória, a comparação com === retorna false. Já obj1 e obj3 são a mesma referência, então a comparação retorna true.

Características de comparação de referências

Objetos são comparados por referência: Mesmo que dois objetos tenham os mesmos valores, eles serão considerados diferentes se não compartilharem a mesma referência.
Não compara conteúdo: O operador de comparação === verifica apenas se os objetos apontam para o mesmo espaço de memória.

Comparando conteúdo de objetos manualmente

Para comparar o conteúdo de dois objetos, você precisa verificar se ambos têm as mesmas propriedades e valores. Isso envolve iterar sobre as chaves e verificar se os valores correspondem.

Exemplo de código para comparar o conteúdo de dois objetos:

function compararObjetos(obj1, obj2) {
  let chaves1 = Object.keys(obj1);
  let chaves2 = Object.keys(obj2);

  if (chaves1.length !== chaves2.length) return false;

  for (let chave of chaves1) {
    if (obj1[chave] !== obj2[chave]) return false;
  }
  return true;
}

let obj1 = { nome: 'João', idade: 25 };
let obj2 = { nome: 'João', idade: 25 };
let obj3 = { nome: 'João', idade: 26 };
console.log(compararObjetos(obj1, obj2));  // Exibe true
console.log(compararObjetos(obj1, obj3));  // Exibe false

Neste exemplo, a função compararObjetos() verifica se dois objetos têm o mesmo número de chaves e se cada chave tem o mesmo valor em ambos os objetos. Se as propriedades e valores correspondem, a função retorna true, caso contrário, retorna false.

Características da comparação manual

Verifica o conteúdo: A comparação manual permite verificar se as propriedades e valores dos objetos são iguais.
Não considera propriedades herdadas: Este método verifica apenas as propriedades próprias dos objetos, ignorando as propriedades herdadas.
Simples e direto: Esse método é fácil de implementar, mas pode ser ineficiente para objetos grandes ou complexos.

Comparação profunda de objetos

Se um objeto contiver outros objetos ou arrays como valores, você precisará fazer uma comparação recursiva para garantir que todos os níveis de profundidade sejam verificados. Uma maneira de fazer isso é usar uma função recursiva.

Exemplo de código para comparação profunda de objetos:

function compararObjetosProfundamente(obj1, obj2) {
  let chaves1 = Object.keys(obj1);
  let chaves2 = Object.keys(obj2);

  if (chaves1.length !== chaves2.length) return false;

  for (let chave of chaves1) {
    let valor1 = obj1[chave];
    let valor2 = obj2[chave];

    if (typeof valor1 === 'object' && typeof valor2 === 'object') {
      if (!compararObjetosProfundamente(valor1, valor2)) return false;
    } else if (valor1 !== valor2) {
      return false;
    }
  }
  return true;
}

let obj1 = { nome: 'João', endereco: { rua: 'Rua A', numero: 123 } };
let obj2 = { nome: 'João', endereco: { rua: 'Rua A', numero: 123 } };
let obj3 = { nome: 'João', endereco: { rua: 'Rua B', numero: 123 } };
console.log(compararObjetosProfundamente(obj1, obj2));  // Exibe true
console.log(compararObjetosProfundamente(obj1, obj3));  // Exibe false

Aqui, compararObjetosProfundamente() realiza uma comparação recursiva dos valores. Se um valor for um objeto, a função chama a si mesma para comparar o conteúdo do objeto. Esse método é útil para comparar objetos aninhados, mas pode ser ineficiente para objetos muito grandes.

Comparando objetos com `JSON.stringify()`

Outra maneira de comparar objetos é convertê-los em strings JSON com JSON.stringify(). Esse método pode ser útil se os objetos não contiverem funções ou propriedades não enumeráveis.

Exemplo com JSON.stringify():

let obj1 = { nome: 'João', idade: 25 };
let obj2 = { nome: 'João', idade: 25 };
console.log(JSON.stringify(obj1) === JSON.stringify(obj2));  // Exibe true

Neste exemplo, JSON.stringify() converte os objetos obj1 e obj2 em strings JSON e as compara. Se os objetos forem iguais em conteúdo, as strings JSON também serão iguais.

Características de `JSON.stringify()`

Simples e rápido: É uma maneira simples de comparar objetos quando os dados não são muito complexos.
Não lida com funções ou propriedades não enumeráveis: JSON.stringify() não pode ser usado se o objeto contiver funções ou propriedades não enumeráveis.
Pode ser ineficiente para objetos grandes: A conversão para JSON e a comparação de strings podem ser caras para objetos grandes.

Conclusão

Comparar dois objetos em JavaScript pode ser simples ou complexo, dependendo das suas necessidades. Se você apenas precisa verificar se dois objetos são a mesma referência, a comparação de referências com === é suficiente. No entanto, se você precisar comparar o conteúdo dos objetos, será necessário usar uma comparação manual, ou até mesmo uma comparação profunda em casos de objetos aninhados. Métodos como JSON.stringify() também podem ser úteis, mas devem ser usados com cautela em objetos mais complexos.

Métodos para comparar objetos e evitar erros em JavaScript

A comparação de objetos em JavaScript é uma habilidade essencial, especialmente quando se trabalha com dados complexos ou com objetos que contêm outros objetos ou arrays. Para realizar comparações profundas, você pode usar funções recursivas ou aproveitar a simplicidade do JSON.stringify(), sempre lembrando das limitações. Saber quando aplicar cada método permitirá que você escreva código mais robusto e eficiente.

Algumas aplicações:

Verificar se dois objetos configurados em partes diferentes do sistema são iguais.
Comparar objetos retornados de APIs para detectar alterações nos dados.
Validar configurações ou estados em que objetos precisam ter o mesmo valor e estrutura.
Utilizar comparações profundas para evitar inconsistências ao trabalhar com objetos aninhados.

Dicas para quem está começando

Use a comparação simples com === quando for comparar referências, mas não para comparar o conteúdo de objetos.
Aprenda a usar funções como Object.keys() e Object.values() para obter as propriedades de objetos, facilitando a comparação manual.
Se você precisar comparar objetos aninhados, implemente uma função recursiva ou use JSON.stringify() para uma comparação rápida.
Cuidado ao usar JSON.stringify() em objetos com funções ou propriedades não enumeráveis, pois ele não lida com esses casos.

Contribuições de Lucas Souza

Comparando dois objetos em JavaScript: Métodos e soluções