Explora los operadores de comparación en JavaScript

Introducción

En este laboratorio, los estudiantes explorarán los operadores de comparación de JavaScript a través de un ejercicio práctico de HTML y JavaScript. El laboratorio guía a los participantes para configurar un archivo HTML y muestra progresivamente varios operadores de comparación, incluyendo mayor que, menor que, igualdad y operadores de igualdad estricta.

Los participantes aprenderán a usar los operadores de comparación escribiendo código JavaScript dentro de una etiqueta de script HTML, experimentando con diferentes comparaciones numéricas y de valores y observando los resultados en la consola del navegador. Al final del laboratorio, los estudiantes entenderán cómo aplicar los operadores de comparación para evaluar las relaciones entre valores y comprender su comportamiento en diferentes escenarios.

Configurar el archivo HTML para los operadores de comparación

En este paso, configurarás un archivo HTML básico para explorar los operadores de comparación de JavaScript. Crearemos un archivo HTML con un script de JavaScript incrustado que nos ayudará a entender cómo funcionan los operadores de comparación.

Abre el WebIDE y navega hasta el directorio ~/project. Crea un nuevo archivo llamado comparison-operators.html con el siguiente contenido:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Comparison Operators</title>
  </head>
  <body>
    <h1>Explorando los operadores de comparación</h1>
    <p>
      Abre la consola del navegador para ver los resultados de nuestros
      operadores de comparación.
    </p>

    <script>
      // Aquí agregaremos nuestros ejemplos de operadores de comparación
      console.log("HTML file setup complete!");
    </script>
  </body>
</html>

Analicemos los componentes clave de este archivo HTML:

La declaración <!DOCTYPE html> garantiza que el navegador use el modo estándar.
Hemos incluido una simple etiqueta <script> donde escribiremos nuestro código JavaScript.
La instrucción console.log() nos ayudará a verificar que el archivo está funcionando correctamente.

Para ver el archivo, normalmente lo abrirías en un navegador web y revisarías la consola de desarrollador del navegador. En nuestro entorno LabEx, verificaremos la creación y el contenido del archivo.

Demostrar los operadores mayor que y menor que

En este paso, aprenderás sobre los operadores de comparación mayor que (>) y menor que (<) en JavaScript. Abre el archivo comparison-operators.html del paso anterior y modifica la sección <script> para explorar estos operadores.

Actualiza el script con el siguiente código:

<script>
  // Operador Mayor que (>)
  console.log("Ejemplos del Operador Mayor que:");
  console.log(10 > 5); // true
  console.log(5 > 10); // false
  console.log(5 > 5); // false

  // Operador Menor que (<)
  console.log("\nEjemplos del Operador Menor que:");
  console.log(5 < 10); // true
  console.log(10 < 5); // false
  console.log(5 < 5); // false

  // Comparando diferentes tipos
  console.log("\nComparando Diferentes Tipos:");
  console.log(5 < "10"); // true (coerción de tipo)
  console.log(10 > "5"); // true (coerción de tipo)
</script>

Estos ejemplos demuestran las características principales de los operadores mayor que y menor que:

Cuando el valor de la izquierda es mayor, > devuelve true
Cuando el valor de la izquierda es menor, > devuelve false
Cuando los valores son iguales, tanto > como < devuelven false
JavaScript realiza una coerción de tipo al comparar diferentes tipos

Abre la consola del navegador para ver los resultados de la comparación. Cada console.log() mostrará el resultado de la comparación.

Practicar los operadores de igualdad y desigualdad

En este paso, explorarás los operadores de igualdad (==) y desigualdad (!=) en JavaScript. Abre el archivo comparison-operators.html y actualiza la sección <script> con el siguiente código:

<script>
  // Operador de igualdad (==)
  console.log("Ejemplos del Operador de igualdad:");
  console.log(5 == 5); // true
  console.log(5 == "5"); // true (coerción de tipo)
  console.log(5 == 10); // false

  // Operador de desigualdad (!=)
  console.log("\nEjemplos del Operador de desigualdad:");
  console.log(5 != 10); // true
  console.log(5 != "5"); // false (coerción de tipo)
  console.log(5 != 5); // false

  // Comparando diferentes tipos
  console.log("\nComparando diferentes tipos:");
  console.log(0 == false); // true (coerción de tipo)
  console.log(1 == true); // true (coerción de tipo)
  console.log("" == false); // true (coerción de tipo)
</script>

Puntos claves sobre los operadores de igualdad y desigualdad:

El operador == realiza una coerción de tipo antes de la comparación
== devuelve true si los valores son iguales después de la conversión de tipo
El operador != comprueba si los valores no son iguales, también con coerción de tipo
La coerción de tipo puede conducir a resultados inesperados

Abre la consola del navegador para ver los resultados de la comparación. Cada console.log() mostrará el resultado de las comparaciones.

Comprender los operadores de igualdad estricta y desigualdad estricta

En este paso, aprenderás sobre los operadores de igualdad estricta (===) y desigualdad estricta (!==) en JavaScript. Abre el archivo comparison-operators.html y actualiza la sección <script> con el siguiente código:

<script>
  // Operador de igualdad estricta (===)
  console.log("Ejemplos del Operador de igualdad estricta:");
  console.log(5 === 5); // true
  console.log(5 === "5"); // false (sin coerción de tipo)
  console.log(0 === false); // false
  console.log(1 === true); // false

  // Operador de desigualdad estricta (!==)
  console.log("\nEjemplos del Operador de desigualdad estricta:");
  console.log(5 !== 10); // true
  console.log(5 !== "5"); // true (sin coerción de tipo)
  console.log(0 !== false); // true
  console.log(1 !== true); // true

  // Comparando con coerción de tipo vs. comparación estricta
  let num = 5;
  let strNum = "5";
  console.log("\nComparando con == vs. ===:");
  console.log(num == strNum); // true (coerción de tipo)
  console.log(num === strNum); // false (comparación estricta)
</script>

Diferencias clave entre la comparación suelta y la comparación estricta:

=== comprueba tanto el valor como el tipo sin coerción de tipo
!== es el operador de desigualdad estricta
Los operadores estrictos evitan la conversión de tipo inesperada
Siempre prefiera === y !== para comparaciones más predecibles

Abre la consola del navegador para ver los resultados de la comparación. Cada console.log() mostrará el resultado de las comparaciones.

Experimentar con los resultados de los operadores de comparación

En este paso, explorarás escenarios más complejos con los operadores de comparación y aprenderás cómo interactúan con diferentes tipos de valores. Abre el archivo comparison-operators.html y actualiza la sección <script> con el siguiente código:

<script>
  // Comparando diferentes tipos y escenarios complejos
  console.log("Escenarios de Comparación Compleja:");

  // Comparando null y undefined
  console.log(null == undefined); // true (coerción de tipo)
  console.log(null === undefined); // false (comparación estricta)

  // Comparando con NaN
  console.log(NaN == NaN); // false (caso especial)
  console.log(NaN === NaN); // false

  // Comparando objetos
  let obj1 = { value: 5 };
  let obj2 = { value: 5 };
  let obj3 = obj1;
  console.log("\nComparaciones de Objetos:");
  console.log(obj1 == obj2); // false (referencias diferentes)
  console.log(obj1 === obj2); // false (referencias diferentes)
  console.log(obj1 === obj3); // true (misma referencia)

  // Comparaciones encadenadas
  let x = 5;
  console.log("\nComparaciones Encadenadas:");
  console.log(1 < x && x < 10); // true
  console.log(1 < x < 10); // Advertencia: Esto no funciona como se esperaría!
</script>

Conclusiones clave de estos experimentos:

null y undefined se comportan de manera diferente con la igualdad suelta y la igualdad estricta
NaN nunca es igual a sí mismo
Las comparaciones de objetos dependen de la referencia, no del contenido
Las comparaciones encadenadas pueden ser complicadas y pueden no funcionar como se esperaría

Abre la consola del navegador para ver los resultados de la comparación y entender el comportamiento sutil de los operadores de comparación.

Resumen

En este laboratorio, los participantes exploran los operadores de comparación de JavaScript a través de un ejercicio práctico de HTML y JavaScript. El laboratorio comienza configurando un archivo HTML básico con un script incrustado, lo que permite a los aprendices entender y practicar diversas técnicas de comparación, como los operadores mayor que, menor que, igualdad y igualdad estricta.

Al trabajar a través de ejemplos prácticos en la consola del navegador, los estudiantes obtienen una comprensión de cómo funcionan los operadores de comparación, aprendiendo a evaluar diferentes tipos de comparaciones numéricas y de valores. El laboratorio ofrece un enfoque estructurado para entender estos operadores fundamentales de JavaScript, permitiendo a los participantes experimentar con diferentes escenarios y observar los resultados booleanos que se obtienen.