JavaScript === | ¿Qué es el operador de igualdad estricta en JavaScript?

¿Cuánto sabes sobre el JavaScript ===? Cubrimos todo lo que necesitas saber sobre la igualdad estricta en JavaScript, incluyendo ejemplos, peligros y más.

En este artículo, voy a explorar el operador JavaScript ===, también conocido como igualdad estricta.

Ya seas completamente nuevo en la programación o un experto en JavaScript, ¿cuánto realmente sabes sobre JavaScript ===?

¡Sigue leyendo para averiguarlo! Voy a cubrir qué es el operador JavaScript ===, cómo usarlo, los problemas comunes a tener en cuenta y, por supuesto, cómo difiere de su primo, la igualdad laxa.

Como el lenguaje de programación más popular durante más de una década, JavaScript sigue dominando la atención en el desarrollo web.

Y si consideras el hecho de que la Oficina de Estadísticas Laborales reporta un salario promedio de más de $85K para desarrolladores web, ¡conocer los entresijos de JavaScript === puede ser muy lucrativo!

Entonces, si estás listo, ¡sumérgete y aprende sobre el operador JavaScript ===!

¿Qué es JavaScript Triple Equals?

OK, voy a asumir que ya conoces un poco de JavaScript. Si eso suena bien, empecemos con los fundamentos de JavaScript ===.

El operador JavaScript === se conoce como el operador de igualdad estricta, y es una herramienta fundamental para comparar valores en tus proyectos de JavaScript.

A diferencia del más conocido doble igual ==, al que llamaremos operador de igualdad laxa, el triple igual no realiza coerción de tipos.

¡Espero no haberte perdido allí!

Dejando de lado un momento, la coerción de tipos es la conversión automática o implícita de valores de un tipo de dato a otro. Siempre encontrarás menciones de esto en cualquier buen libro de JS.

Imagina convertir una cadena en un número al realizar operaciones entre tipos mixtos.

Como dije, JavaScript === no hace esto, lo que significa que compara tanto el valor como el tipo.

Si ambos son iguales, devuelve un valor verdadero, de lo contrario, obtenemos un resultado falso.

Esto es ideal para obtener una comprobación de igualdad más precisa y confiable que con la igualdad laxa.

Entonces, la idea principal es que cuando usamos ===, JavaScript compara dos valores para ver si son del mismo tipo y valor, y el valor resultante es de tipo booleano.

Si haces cualquier buen curso de JavaScript, verás que se utiliza la igualdad estricta todo el tiempo.

Por ejemplo, si comparo un número y una cadena, === los considerará desiguales, incluso si la cadena contiene un valor numérico que coincide con el número.

Entender este comportamiento es crucial para escribir un código claro y sin errores, ya que nos ayuda a evitar los bugs sutiles que pueden ocurrir cuando JavaScript convierte tipos automáticamente.

Esto es una pista no tan sutil de que esto es más común cuando se utiliza JavaScript doble igual.

También es realmente útil conocer estos detalles si tienes la intención de obtener certificaciones profesionales de JavaScript.

En general, el operador de igualdad estricta es una parte esencial de escribir código JavaScript robusto y predecible.

Al usar ===, podemos asegurarnos de que las comparaciones sean exhaustivas y precisas, lo que hace que nuestro código sea más confiable y mantenible a largo plazo. ¡Ganamos!

Cómo Usar JavaScript ===

Ahora que sabemos qué es el operador de igualdad estricta, veamos cómo podemos usar === en JavaScript para comparaciones precisas.

¡Asegúrate de añadir estos consejos a tu hoja de ayuda personal de JavaScript!

Para empezar, voy a mostrar algunos casos de uso simples donde utilizo la sintaxis básica === para crear operadores de comparación para dos variables.

¡Así que abramos nuestros IDEs de JavaScript y programemos!

Nota que he creado una variable numérica y una cadena con el mismo valor para mostrar cómo la igualdad estricta maneja estos escenarios.

El objetivo es simple: si el tipo y el valor son idénticos, el operador devuelve true, de lo contrario devuelve false porque tenemos operandos de diferentes tipos o valores.

/*CodesCode.io: JavaScript ===Uso básico*/let num = 5;let str = "5";console.log(num === 5); // true, mismo valor y tipoconsole.log(str === "5"); // true, mismo valor y tipoconsole.log(num === str); // false, tipos diferentes

Deberías ver que cuando comparas diferentes tipos de datos, === siempre devolverá un resultado booleano de false.

Ahora, vamos a profundizar en algunas declaraciones condicionales donde la precisión del tipo es importante.

¿Esperabas ver cada uno de esos resultados? En particular, ¿esperabas ver ese resultado al comparar null y undefined?

Si vienes de otro lenguaje, es posible que asumas que un valor null y undefined son esencialmente lo mismo, pero como puedes ver, esto no es estrictamente cierto.

Esto es bueno saberlo si estás acostumbrado a igualar ambos a algo como un valor NaN.

/*CodesCode.io: JavaScript ===Comparaciones*/console.log('5' === 5); // false, cadena y númeroconsole.log(true === 1); // false, booleano y númeroconsole.log(null === undefined); // false, null y undefined

Otro gran caso de uso para === en JavaScript es cuando trabajamos con arrays y objetos.

Estos son tipos de datos muy comunes en JavaScript, así que veamos cómo === los compara.

Pista: esto se trata de la igualdad de referencia, no del contenido de los objetos o arrays.

/*CodesCode.io: JavaScript ===Arrays*/let array1 = [1, 2, 3];let array2 = [1, 2, 3];let array3 = array1;console.log(array1 === array2); // false, referencias diferentesconsole.log(array1 === array3); // true, misma referencia

En el ejemplo de arriba, puedes ver que aunque array1 y array2 tienen el mismo contenido, no son el mismo array. Esto se debe a que ocupan diferentes referencias de memoria.

Como resultado, obtenemos un valor false. Por otro lado, cuando creamos array3, lo asignamos como igual a array1, por eso JavaScript === devuelve true para esa comparación.

Como probablemente habrás adivinado, estos mismos principios se aplican a los objetos, como se muestra a continuación.

/*CodesCode.io: JavaScript ===Objetos*/let obj1 = { name: "Alice" };let obj2 = { name: "Alice" };let obj3 = obj1;console.log(obj1 === obj2); // false, diferentes objetosconsole.log(obj1 === obj3); // true, mismo objeto

Para terminar, exploraremos cómo utilizar la igualdad estricta en declaraciones condicionales.

Nuevamente, recuerda que estamos comprobando que tanto el valor como el tipo coincidan.

Debido a esto, cuando comparamos nuestra variable de tipo cadena con un número, JavaScript === devuelve false y entramos en la cláusula else.

Entonces, aunque el valor de age es numéricamente igual a 18, los tipos son diferentes (cadena vs número), por eso la condición se evalúa como false.

También podemos aplicar esta idea para incluir operadores lógicos en declaraciones condicionales más complejas cuando sea necesario.

/*CodesCode.io: JavaScript ===Declaración condicional*/let age = "18";if (age === 18) {  console.log("Acceso concedido.");} else {  console.log("Acceso denegado."); // Estos se ejecutarán}

¡Excelente! Ahora hemos aprendido cómo usar === en algunos de los escenarios más comunes, ¡buen trabajo!

El punto clave que debes recordar es que en JavaScript === se trata de más que comparar valores; se trata de garantizar la integridad de los tipos que se están comparando.

En esta etapa, consideremos por qué usaríamos === en lugar de == en nuestro código de JavaScript y viceversa.

¿Por Qué Usamos === En Lugar De ==?

Comprender cómo usar los operadores de igualdad estricta (===) y laxa (==) de JavaScript es fundamental para escribir un código preciso y libre de errores.

También es una pregunta común en entrevistas de JavaScript.

Dicho esto, es posible que te preguntes, ¿por qué JavaScript tiene una igualdad estricta y una laxa? ¿Cuál es la diferencia principal entre ambas? Y ¿por qué usarías una en lugar de la otra?

¡Excelente pregunta! Bueno, comencemos por observar su diferencia más notable, que, como ya mencioné, es cómo manejan la coerción de tipos:

Igualdad estricta (===) verifica tanto el valor como el tipo. Si alguno de los tipos difiere, devuelve falso. No realiza conversión de tipos.
Igualdad laxa (==) compara valores, pero antes de realizar la comparación, convierte los operandos al mismo tipo mediante coerción de tipos.

De acuerdo, eso suena bien, pero creo que siempre es útil ver un ejemplo de código simple para ilustrar la diferencia.

/*CodesCode.io: JavaScript ===Strict Equality vs Loose Equality*/let num = 5;let str = "5";console.log(num === str); // false, ya que los tipos son diferentes (número vs cadena)console.log(num == str);  // true, ya que el valor '5' es el mismo después de la conversión de tipos

En este ejemplo, el operador de triple igual devuelve falso porque una variable es un número y la otra es una cadena.

En contraste, el operador de doble igual devuelve verdadero porque la cadena ‘5’ se convierte en número antes de la comparación.

Pero aun así, ¿por qué usarías === en lugar de ==?

Bueno, recomendaría usar === en JavaScript si necesitas comparaciones más predecibles y precisas, ya que evita las peculiaridades de la coerción de tipos de JavaScript.

¡Créeme, esto puede causar algunos errores realmente difíciles de encontrar!

Dicho esto, hay ocasiones en las que tiene sentido usar == en lugar de ===.

Un gran ejemplo es cuando estás obteniendo datos, pero los valores numéricos se formatean de manera inconsistente como cadenas o números.

Este es un momento ideal para usar igualdad laxa y coerción de tipos en lugar de una comparación estricta de números.

De manera similar, es posible que desees manejar situaciones en las que una variable sea nula o no definida sin distinguir entre las dos.

La igualdad laxa es ideal para esto, ya que no querrías una comparación de diferentes tipos.

Inconvenientes comunes con JavaScript ===

Si eres nuevo en JavaScript, creo que realmente ayuda tener un conocimiento práctico de los inconvenientes comunes que puedes encontrar al usar igualdad estricta.

¡Créeme, estos pueden causar una gran confusión, especialmente si estás acostumbrado a usar la igualdad laxa!

Inconveniente #1: Comparar diferentes tipos

Sé que esto puede sonar tonto, pero es un error muy común comparar valores de diferentes tipos esperando un resultado verdadero.

Pero, como sabemos, esto siempre devolverá falso porque JavaScript === también verifica la igualdad de tipos.

/*CodesCode.io: JavaScript === Common PitfallsComparing Different Types*/let num = 0;let str = "0";// Inconveniente: Esperando que ambos sean equivalentesconsole.log(num === str); // false, debido a diferentes tipos

Inconveniente #2: Comparar objetos y arrays

Otro malentendido común al usar la triple igualdad de JavaScript es esperar que === compare el contenido de objetos o arrays, en lugar de sus referencias.

Recuerda, no importa si los arrays tienen contenido idéntico, si usas ===, estará verificando referencias de memoria idénticas.

Esta es la diferencia clave entre usar === en lugar de == con arrays y objetos.

/*CodesCode.io: JavaScript === Common PitfallsComparing Arrays*/let array1 = [1, 2, 3];let array2 = [1, 2, 3];// Inconveniente: Suponiendo que verifica la igualdad de contenidoconsole.log(array1 === array2); // false, referencias diferentes

Y lo mismo se aplica a los objetos.

/*CodesCode.io: JavaScript === Common PitfallsComparing Objects*/let obj1 = { name: 'Alice' };let obj2 = { name: 'Alice' };// Inconveniente: Suponiendo que compara las propiedades del objetoconsole.log(obj1 === obj2); // false, instancias de objetos diferentes

Inconveniente #3: Interpretar erróneamente las comparaciones de null y undefined

Este es un inconveniente sutil pero impactante que puede confundir a los principiantes. Lo que debes recordar es que aunque null y undefined son laxamente iguales (==), no son estrictamente iguales.

/*CodesCode.io: JavaScript === Common PitfallsNull and Undefined Comparisons*/// Inconveniente: Suponiendo que null y undefined son estrictamente igualesconsole.log(null === undefined); // false

Consideraciones de rendimiento

He pasado algún tiempo hablando sobre cuándo y por qué utilizar JavaScript === en lugar de ==, pero también es útil ver esto desde el punto de vista del rendimiento.

Esto puede ser particularmente importante en aplicaciones a gran escala porque, como sabemos, en cuanto al rendimiento de Big-O, todo se trata de cómo el rendimiento escala con el tamaño.

Entonces, cuando usamos el operador de igualdad estricta === en JavaScript, podemos esperar que esto sea generalmente más rápido que el operador de igualdad laxa.

Esto se debe a que compara valores y tipos sin intentar la conversión de tipos, lo que introduce una sobrecarga adicional.

El efecto neto es que cuando usamos === en JavaScript, el motor de JavaScript no gasta recursos adicionales en coercion de tipos, lo que lleva a evaluaciones más rápidas.

Esto puede ser especialmente notable en bucles ajustados o llamadas de funciones de alta frecuencia.

Considera este ejemplo en el contexto de un bucle, como se muestra a continuación.

/*CodesCode.io: Consideraciones de rendimiento de === en JavaScript*/for (let i = 0; i < largeArray.length; i++) {  if (largeArray[i] === targetValue) {      // Realizar acción  }}

En este escenario simple, al usar ===, he asegurado comparaciones directas para cada iteración, evitando la sobrecarga de conversión de tipos que veríamos al usar ==.

Si el número de iteraciones es pequeño, las ganancias de rendimiento serían insignificantes, pero al trabajar con conjuntos de datos grandes o aplicaciones críticas de rendimiento, esto se vuelve muy útil.

Dicho esto, también diría que en escenarios de codificación diarios, las diferencias de rendimiento son en su mayoría mínimas.

Para mí, la razón principal para elegir entre === y == debería determinarse principalmente por la necesidad de coerción de tipos y los detalles de la comparación en cuestión.

En la mayoría de los casos, los beneficios de un código más claro y predecible con === superan sus ventajas de rendimiento, pero ¡también es bueno tenerlas!

Conclusión

¡Ahí lo tienes, ahora sabes todo lo que hay que saber sobre el operador === en JavaScript!

¿Aprendiste algo nuevo? ¡Espero que sí!

Ya sea que estés comenzando con JS o seas un programador experimentado que quiere mejorar su conocimiento, ahora deberías tener un buen dominio de lo que es el operador === en JavaScript.

Además, también sabes cómo usarlo, los problemas comunes a los que debes prestar atención y cómo se diferencia de su primo más permisivo, la igualdad laxa.

¡Espero que hayas disfrutado esta exploración de una de las herramientas más comunes en el lenguaje JavaScript y no dudes en dejar un comentario abajo!

¡Feliz programación!

¿Eres nuevo en JavaScript y ansías aprender más sobre este lenguaje tan popular? Echa un vistazo a:

Preguntas frecuentes

1. ¿Qué es === y == en JavaScript?

En JavaScript, === es el operador de igualdad estricta que compara valores y tipos sin coerción de tipos, mientras que == es el operador de igualdad laxa y compara valores con coerción de tipos.

2. ¿Por qué usar === en lugar de == en JavaScript?

Normalmente es mejor usar === en lugar de == porque proporciona una comparación más precisa y predecible al verificar tanto el valor como el tipo. Esto también te ayuda a evitar errores causados por la conversión de tipos implícita.