8

Mi pregunta en si es esa:

¿Cómo se deben comparar correctamente dos objetos en javascript?

$(document).ready(function(){

  function p(o){
    return JSON.stringify(o)
  }

  function compare(o1, o2){
    const r = (o1 === o2)
    console.log(p(o1) + ' === ' + p(o2) + ': ' + r)
  }

  var a = [], b = [], c = a;

  var x = {}, y = {}, z = x;

  compare(a, b)                             // false
  compare(a, c)                             // true
  compare([], [])                           // false
  compare({}, {})                           // false
  compare(99, 99)                           // true
  compare(new Number(1), 1)                 // false
  compare(new Number(1), new Number(1))     // false
  compare(new String('o'), new String('o')) // false
  compare(new String('s'), 's')             // true
  compare('foo', 'foo')                     // true
  compare({'foo':'bar'}, {'foo':'bar'})     // false
  compare(x, y)                             // false
  compare(x, z)                             // true

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Entiendo bien que en el snippet anterior los objetos de tipo primitivo devuelvan correctamente true:

console.log((9 === 9)) // true

Pero me gustaría saber además de saber como comparar correctamente dos objetos el por qué sucede esto...

console.log(([] === [])) // false

ACTUALIZACIÓN:

La comparación de objetos a través de JSON.stringify() queda descartada, en el siguiente ejemplo se puede apreciar como estos dos objetos son iguales, su única variación es la pocisión de sus elementos, por lo que al compararlos nos devolverá false:

var a = JSON.stringify({
  "firstName": "JP",
  "lastName": "Richardson"
});
var b = JSON.stringify({
  "firstName": "JP",
  "lastName": "Richardson"
});

console.log(a === b); // true

var x = JSON.stringify({
  "firstName": "JP",
  "lastName": "Richardson"
});

var y = JSON.stringify({
  "lastName": "Richardson",
  "firstName": "JP"
});

console.log(x === y); // false

4
  • 2
    Yo tengo dos amigos que son gemelos. Son iguales iguales entre sí, pero de ninguna manera son iguales iguales iguales.
    – ffflabs
    Commented el 23 mar. 2017 a las 20:30
  • 2
    @amenadiel No soy un biologo para decir esto pero tengo entendido que los gemelos comparten exactamente los MISMOS genes, por lo tanto biologicamente son identicos, a diferencia de los mellizos, como te digo, tengo entendido, ¡que alguien aclare esto por favor! jajaja
    – Jorius
    Commented el 23 mar. 2017 a las 20:33
  • 3
    Exactamente. Son idénticos, pero no son la misma persona. Con los objetos es igual. Puedes hacer una comparación de todas sus propiedades enumerables, pero nunca serán el mismo objeto a menos que explícitamente declares que uno es referencia del otro, como en a=c
    – ffflabs
    Commented el 23 mar. 2017 a las 20:38
  • 1
    @Jorius yo sí soy biólogo y estás en lo correcto. Los gemelos son clones y provienen del mismo espermatozoide y del mismo óvulo.
    – Mariano
    Commented el 12 may. 2017 a las 15:04

2 respuestas 2

9

Respuesta directa

Para comparar si dos objetos son "gemelos", primero determina si son "hijos" del mismo "padre" y luego si tienen el mismo "ADN", es decir, que los objetos son instancias del mismo objeto y las propiedades son iguales ( nombre, orden, atributos y valores).

NOTA: Por simplicidad en la metáfora no se consideran otros elementos como las partes del cuerpo.

Si no te interesa que sean "gemelos" sino que sólo algunos elementos sean iguales, entonces compara dichos elementos.

A continuación un ejemplo breve sobre cómo saber si dos objetos son instancias del mismo objeto y, por brevedad, si tienen las mismas propiedades, entendiendo por esto que las propiedades de ambos tienen el mismo nombre y que su posición es la misma.

// Crear constructor personalizado
function vivienda() {
  var puerta;
};

// Crear objeto casa
var casa = new vivienda();
casa.puerta = 1;

// Crear objeto residencia
var residencia = new vivienda();
residencia.puerta = 2;

/* Si los objetos son hermanos 
 * entonces verificar que sus propiedades 
 * tengan el mismo nombre y en el mismo orden */
if (casa instanceof vivienda && residencia instanceof vivienda) {
  console.log('Casa y Residencia son instancias de vivienda por lo tanto son comparables');
  var conclusion = (Object.getOwnPropertyNames(casa).toString() == Object.getOwnPropertyNames(residencia).toString()) ?
  'Tienen las misma estructura': 'No tienen la misma estructura';
  console.log('Conclusión: ' + conclusion);
  
} else {
  console.log('Casa ó Residencia no son instancias de vivienda y por lo tanto no son comparables');
}

// Mostrar los nombres y valores de las propiedades de cada objeto
console.log('** casa **' + Object.getOwnPropertyNames(casa));
Object.getOwnPropertyNames(casa).forEach(
  function(val, idx, array) {
    console.log(val + ' -> ' + casa[val]);
  }
)
console.log('** vivienda **');
Object.getOwnPropertyNames(residencia).forEach(
  function(val, idx, array) {
    console.log(val + ' -> ' + residencia[val]);
  }
)

Explicación

Nota sobre el contenido de la pregunta: En el primer bloque de código se incluyen comparaciones de diversos tipos de operandos. En el segundo bloque de código se comparan variables que tienen asignados objetos creados con operaciones anidadas. De esto se puede concluir que la confusión se debe al desconocimiento de las algunos de los conceptos esenciales de JavaScript y de la Ingeniería de Software. Considerando esto, a continuación se presenta una explicación abreviada abarcando algunos conceptos clave.

El "debe" de una comparación lo establece el propósito y en el caso de JavaScript aún más.

Comparado con otros lenguajes de programación, JavaScript podría considerarse como muy flexible ya que los algoritmos sobre cómo deben realizarse las operaciones consideran los tipos de los operandos.

Considerando lo anterior al implementar una comparación en JavaScript debemos tener presente:

  1. Las variables son referencias a objetos.
  2. Los objetos tienen propiedades.
  3. Las propiedades pueden ser objetos o funciones (estas últimas también llamadas métodos).
  4. Las propiedades tienen atributos.
  5. Salvo los primitivos, los objetos heredan propiedades y funciones de un prototipo.

Considerando lo anterior así como la premisa de ser un lenguaje flexible, JavaScript incluye dos tipos de comparaciones, estricta y abstracta, cada una de las cuáles cuenta con su propio algoritmo, los cuales se describen en la especificaciones ECMAScript. A continuación los enlaces las secciones correspondientes de la versión 5.

En síntesis

  • Una comparación estricta de dos objetos devuelve falso porque así está determinado en la especificación. La lógica de esto es similar a la identidad legal de los "gemelos" en los países "occidentales", aunque tengan los mismos padres cada uno se registra con nombre distinto y cada uno tiene los derechos y obligaciones como individuos independientes acordes a sus condiciones individuales.

  • El resultado de una comparación abstracta de dos objetos se presta a "confusión" porque varía según sea el tipo de los objetos.

5

Supongo que estamos hablando de comparar valores que almacenan dos objetos. En ese caso, lo mencionado por @M.Gress solo es válido si ambos objetos son idénticos incluso en el orden de sus propiedades, lo cual no resulta de mucha utilidad. La manera ideal sería comparando todas las propiedades incluso las no enumerables, pero esto no es posible, al menos no en todos los navegadores.


¿Cómo funcionan los operadores de comparación?

En lo más oscuro de JavaScript, donde reina la maldad y la confusión, existen dos grupos de operadores de comparación:

  • Grupo estricto
  • Grupo no estricto

El grupo estricto comprende los operadores === y !==, mientras que el grupo no estricto comprende -como lo diría el maestro Douglas Cockford en su libro "JavaScript: the good parts"- sus malvados gemelos == y !=. Este último grupo se debe evitar a toda costa porque son causantes de muchos dolores de cabeza.

Grupo no estricto

Este grupo de operadores de igualdad debe evitarse lo más posible, de hecho, te recomendaría que te olvides de su existencia. Un punto clave para entender la fuente de problemas al usar los operadores es el siguiente: la comparación de igualdad en JavaScript no es transitiva. ¿Qué significa esto? Veámoslo en el siguiente código:

let foo = 'foo';
let foo2 = new String('foo');
let foo3 = new String('foo');

console.log(foo == foo2);
console.log(foo2 == foo3);
console.log(foo == foo3);

¿Por qué la comparación entre foo y foo3 resulta en false cuando son valores iguales?

Bueno, la respuesta es un poco tricky. Para entender por qué pasa esto, necesitamos entender cómo se hace la comparación internamente.

JavaScript utiliza realiza dos procesos al comparar dos variables:

  • ToNumber
  • ToPrimitive

¿Qué significa esto? Significa lo siguiente. Si comparas dos variables que no sean objetos, si estos son diferentes internamente se convierten a números mediante ToNumber y acto seguido, realiza una comparación estricta. Esta es la razón por la cual esto se cumple:

'123' == 123 // Number('123') === 123 -> true
1   == '1'    // 1 === Number('1') -> true
0   == false  // 0 === Number(false) -> true

Esto también aplica a booleanos ya que un booleano en representación decimal será 0 o 1. Sin embargo, algo distinto sucede cuando comparas una variable X con un objeto o dos objetos: aquí se evalúa el operando A o B (el que sea objeto) con ToPrimitive, este método interno simplemente hace llamadas recursivas a toString y valueOf para obtener algún valor primitivo. Posteriormente, hace uso de ToNumber para realizar una comparación.

Si comparas dos objetos, básicamente el operador de igualdad no estricto devolverá true cuando comparan la misma referencia en memoria:

let foo = { bar: 'bar' }
let clone = foo;

console.log(foo == clone);


Grupo estricto

Aquí no hay rodeos, primero se verifica que sea el mismo tipo de dato, posteriormente, se comparan valores.


¿Cómo comparar dos objetos?

Si hablamos de objetos literales y de comparar propiedades propias basta con iterar las propiedades de ambos objetos. Por ejemplo:

function areObjEquals (obj1, obj2) {
  let equal = true;

  for (let [key, val] of Object.entries(foo)) {
    if (bar.hasOwnProperty(key))   {
      if (bar[key] !== val) {
        equal = false;
      }
    } else {
      equal = false;
    }

    if (!equal) { break; }
  }

  return equal;
}
3
  • No estoy de acuerdo con lo de "evitar a toda costa" ya que por algo existe en la especificación y se utiliza en muchos ejemplos por ahí incluso para explicar cuando conviene usarlos. Tal vez debería ser algo así como "si no sabes lo que estás haciendo, no los uses".
    – Rubén
    Commented el 12 may. 2017 a las 11:20
  • Hay realmente muy pocos escenarios en los que se podría considerar su uso; pero aun así en estos escenarios encontrarás que bien puedes hacer una comparación estricta. Te recomiendo leer este post que analiza posibles escenarios de uso de == y sus contrapartes.
    – gugadev
    Commented el 12 may. 2017 a las 12:02
  • Gracias Gustavo, me parece muy interesante la referencia. Cabe hacer notar que tu comentario así como la referencia refuerzan mi oposición a la declaración "evitar a toda costa", por un lado porque esos casos que consideras "muy pocos" son "demasiados" como para considerarlos "la excepción que hace la regla" (: Sin embargo, los motivos por lo que lo mencionas considero que podrían justificar que en un "manual de estilo" o "guía de colaboración" se establezca como "obligatorio" el uso de los comparadores del grupo estricto.
    – Rubén
    Commented el 12 may. 2017 a las 12:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.