Diferencia entre los operadores de comparación == y === en JavaScript

Esta es la pregunta frecuente en la entrevista de JavaScript. Podemos comparar tipos primitivos, de matriz y de objeto usando dos operadores de comparación == y === disponible en JavaScript. Este artículo describe la diferencia entre estos dos con muchos ejemplos.

Índice
  1. Operador "=="
  2. Operador "==="
  3. Compara "==" y "==="
  4. Objeto.es()
  5. Resumen

Operador "=="

  • == también se conoce como un operador de comparación abstracto que solo compara el contenido del operando y no el tipo.
  • == intenta convertir operandos a un tipo compatible antes de la comparación.
  • La cadena y el número con el mismo contenido son iguales. == convierte cadena en número antes de la comparación.
  • 0, false y cadena vacía "" son comparables e iguales.
  • null y undefined son comparables e iguales.
  • Dos arreglos con exactamente los mismos elementos no son iguales porque ambos se refieren a un objeto diferente en la memoria.
  • De manera similar, dos objetos con exactamente las mismas propiedades no son iguales porque ambos se refieren a un objeto diferente en la memoria.

Operador "==="

  • === también se conoce como operador de comparación estricta que compara tanto el contenido como su tipo.
  • === no intenta convertir el operando en tipos compatibles antes de comparar y comparar directamente. Tiene un mejor rendimiento en comparación con ==
  • Dos cadenas son estrictamente iguales cuando tienen la misma secuencia de caracteres, la misma longitud y los mismos caracteres en las posiciones correspondientes.
  • Dos números son estrictamente iguales cuando son numéricamente iguales (tienen el mismo valor numérico).
  • NaN no es igual a nada, incluido NaN. Confundido en JavaScript.
  • El cero positivo (+0) y el cero negativo (-0) son estrictamente iguales. Confundido en JavaScript ya que el contenido es diferente.
  • Dos valores booleanos son estrictamente iguales solo si ambos son verdaderos o falsos.
  • Dos objetos son estrictamente iguales solo si se refieren al mismo objeto.
  • null estrictamente igual a nulo
  • undefined estrictamente igual a indefinido

Compara "==" y "==="

console.log("cnc" == "cnc");     // true, same content and type
console.log("cnc" === "cnc");    // true, same content and type

console.log(12345 == 12345);     // true, same content and type
console.log(12345 === 12345);     // true, same content and type

console.log(false == false);     // true, same content and type
console.log(false === false);    // true, same content and type
 
console.log(12345 == "12345");   // true, comparable and equal
console.log(12345 === "12345");  // false, different type

console.log(0 == false);         // true, comparable and equal
console.log(0 === false);        // false, different type

console.log("" == false);        // true, comparable and equal
console.log("" === false);       // false, different type

console.log(null == undefined);  // true, comparable and equal
console.log(null === undefined); // false, different type

console.log([] == []);           // false, both refers to different object in memory
console.log([] === []);          // false, both refers to different object in memory

console.log([1, 2] == [1, 2]);   // false, both refers to different object in memory
console.log([1, 2] === [1, 2]);  // false, both refers to different object in memory

console.log({} == {});           // false, both refers to different object in memory
console.log({} === {});          // false, both refers to different object in memory

var array1 = [1, 2, 3, 4, 5];
var array2 = array1;
console.log(array1 == array2);   // true, both refers to same array
console.log(array1 === array2);  // true, both refers to same array

var obj1 = { app : "cnc"};
var obj2 = obj1;
console.log(obj1 == obj2);       // true, both refers to same object
console.log(obj1 === obj2);      // true, both refers to same object

console.log(+0 == -0);           // true, confusing, content is different
console.log(+0 === -0);          // true, confusing, content is different

console.log(NaN == NaN);         // false, confusing, content and type is same
console.log(NaN === NaN);        // false, confusing, content and type is same

Las dos últimas comparaciones son muy confusas en Javascript, recuerda siempre

  • NaN no es igual a NaN
  • +0 es igual a -0

También recuerda, === se recomienda utilizar para la comparación siempre que sea posible, ya que es más rápido que == en términos de rendimiento.

Objeto.es()

ES6 introdujo un nuevo método Object.is() para comparar dos valores, vamos a comprobarlo

console.log(Object.is("cnc", "cnc"));     // true, same content and type
console.log(Object.is(12345, 12345));     // true, same content and type
console.log(Object.is(false, false));     // true, same content and type

console.log(Object.is(12345, "12345"));   // false, different type
console.log(Object.is(0, false));         // false, different type
console.log(Object.is("", false));        // false, different type
console.log(Object.is(null, undefined));  // false, different type

console.log(Object.is([], []));           // false, both refers to different object in memory
console.log(Object.is([1, 2], [1, 2]));   // false, both refers to different object in memory
console.log(Object.is({}, {}));           // false, both refers to different object in memory

var array1 = [1, 2, 3, 4, 5];
var array2 = array1;
console.log(Object.is(array1, array2));   // true, both refers to same array

var obj1 = { app : "cnc"};
var obj2 = obj1;
console.log(Object.is(obj1, obj2));       // true, both refers to same object

console.log(Object.is(+0, -0));           // false, es6 is good, different content
console.log(Object.is(NaN, NaN));         // true, es6 is good, same content and type

ves eso Object.is() hace que comparar NaN y +0/-0 sea menos confuso.

Resumen

O == comparar solo contenido, === compara tanto el contenido como el tipo de operandos. Operador de comparación estricto === no intenta convertir operandos en tipos compatibles y proporciona un mejor rendimiento como comparación con el operador de comparación abstracta ==.

Último, Object.is() introducido en ES6 funciona de manera muy similar al operador estricto === y también evitar la confusión de las comparaciones NaN y las comparaciones +0/-0. Se recomienda utilizar Object.is().

Si quieres conocer otros artículos parecidos a Diferencia entre los operadores de comparación == y === en JavaScript puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas