Declaraciones Condicionales en JavaScript

Introducción

En este laboratorio, aprenderá a utilizar sentencias condicionales en JavaScript. Las sentencias condicionales son una parte fundamental de la programación que le permite ejecutar diferentes bloques de código en función de si una determinada condición es verdadera o falsa. Esto le permite crear aplicaciones dinámicas y receptivas que pueden tomar decisiones y cambiar su comportamiento en consecuencia.

Cubriremos los siguientes conceptos clave:

• La sentencia if para ejecutar código cuando una condición es verdadera.
• La cláusula else para proporcionar una ruta alternativa.
• La sentencia else if para comprobar múltiples condiciones.
• La diferencia entre los operadores de igualdad débil (==) y estricta (===).

Al final de este laboratorio, habrá creado un script sencillo que demuestra cómo controlar el flujo de su programa utilizando estas herramientas esenciales.

Escribir sentencias if con comparaciones

En este paso, aprenderá a usar la sentencia if, que es la sentencia condicional más básica en JavaScript. Ejecuta un bloque de código solo si una condición especificada se evalúa como true.

La sintaxis básica es:

if (condition) {
  // código a ejecutar si la condición es verdadera
}

Crearemos un script que muestre un saludo basado en la hora del día. Primero, comprobemos si es por la mañana.

1. En el explorador de archivos en el lado izquierdo del WebIDE, busque y abra el archivo script.js.
2. Agregue el siguiente código a script.js. Este código obtiene la hora actual del sistema y, si la hora es menor que 12, cambia el texto del elemento <h1> en nuestra página HTML.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
}

1. Después de agregar el código, guarde el archivo (puede usar Ctrl+S o Cmd+S).
2. Para ver el resultado, haga clic en la pestaña Web 8080 en la parte superior de la interfaz. Si la hora actual es antes del mediodía, verá el mensaje "Good Morning!". De lo contrario, el mensaje seguirá siendo "Hello!".

Añadir cláusula else para ruta alternativa

En este paso, agregará una cláusula else a su sentencia if. La cláusula else le permite especificar un bloque de código que se ejecutará si la condición en la sentencia if es false. Esto proporciona una ruta alternativa para la lógica de su programa.

La sintaxis es:

if (condition) {
  // código a ejecutar si la condición es verdadera
} else {
  // código a ejecutar si la condición es falsa
}

Modifiquemos nuestro script para mostrar un saludo diferente si no es por la mañana.

1. Abra nuevamente el archivo script.js en el editor.
2. Modifique su código existente para incluir un bloque else. Esto establecerá el saludo a "Good Afternoon!" si la condición currentHour < 12 es falsa.

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else {
  greetingElement.textContent = "Good Afternoon!";
}

1. Guarde el archivo script.js.
2. Cambie a la pestaña Web 8080 para ver los cambios. Ahora, si la hora es después del mediodía, el mensaje cambiará de "Hello!" a "Good Afternoon!".

Usar else if para múltiples condiciones

En este paso, aprenderá a usar la sentencia else if para manejar múltiples condiciones. Cuando tenga más de dos resultados posibles, else if le permitirá probar una serie de condiciones en orden.

La sintaxis es:

if (condition1) {
  // código para condition1
} else if (condition2) {
  // código para condition2
} else {
  // código si no se cumplen las condiciones
}

Ampliaremos nuestro script de saludo para incluir un mensaje para la noche. Definiremos "tarde" como antes de las 6 PM (18:00) y "noche" como cualquier momento después de eso.

1. En el archivo script.js, actualice su código para incluir una condición else if. La lógica ahora será:
   • Si la hora es antes de las 12, es "Morning".
   • De lo contrario, si la hora es antes de las 18, es "Afternoon".
   • De lo contrario, es "Evening".

const greetingElement = document.getElementById("greeting");
const currentHour = new Date().getHours();

if (currentHour < 12) {
  greetingElement.textContent = "Good Morning!";
} else if (currentHour < 18) {
  greetingElement.textContent = "Good Afternoon!";
} else {
  greetingElement.textContent = "Good Evening!";
}

1. Guarde el archivo y actualice la pestaña Web 8080. El saludo ahora reflejará con precisión si es mañana, tarde o noche según la hora actual.

Aplicar el operador de igualdad == en la condición

En este paso, exploraremos el operador de igualdad ==. Este operador, también conocido como operador de igualdad "flexible" o "abstracta", compara dos valores para determinar si son iguales después de intentar convertirlos a un tipo común.

Por ejemplo, el número 10 y la cadena '10' se consideran iguales cuando se usa ==.

Para ver esto en acción, agregaremos un nuevo fragmento de código a nuestro script. Este código no afectará el saludo, pero registrará un mensaje en la consola de desarrollador del navegador.

1. Agregue el siguiente código al final de su archivo script.js.

let numberValue = 10;
let stringValue = "10";

if (numberValue == stringValue) {
  console.log("The == operator says they are equal!");
}

1. Guarde el archivo. Para ver la salida, necesita abrir la consola de desarrollador.
2. En la pestaña Web 8080, haga clic derecho en cualquier lugar de la página y seleccione "Inspeccionar" o "Inspeccionar elemento". Esto abrirá las herramientas de desarrollador.
3. Haga clic en la pestaña "Consola" dentro de las herramientas de desarrollador. Debería ver el mensaje: The == operator says they are equal!. Esto confirma que JavaScript convirtió los tipos antes de la comparación.

Prueba de igualdad estricta con el operador ===

En este paso final, aprenderá sobre el operador de igualdad estricta ===. A diferencia del operador de igualdad flexible (==), el operador de igualdad estricta compara tanto el valor como el tipo de los operandos. No realiza conversión de tipos.

Este es generalmente el operador recomendado para comprobaciones de igualdad en JavaScript porque se comporta de manera más predecible y ayuda a evitar errores sutiles.

Modifiquemos el ejemplo del paso anterior para usar === y observar la diferencia.

1. Agregue el siguiente nuevo bloque de código al final de su archivo script.js.

let numberValueStrict = 10;
let stringValueStrict = "10";

if (numberValueStrict === stringValueStrict) {
  console.log("The === operator says they are equal!");
} else {
  console.log(
    "The === operator says they are NOT equal, because their types are different."
  );
}

1. Guarde el archivo y observe nuevamente la consola de desarrollador en la pestaña Web 8080. Es posible que necesite actualizar la página.
2. Esta vez, verá el mensaje: The === operator says they are NOT equal, because their types are different.. Esto se debe a que numberValueStrict es un number y stringValueStrict es un string, y el operador === los identifica correctamente como diferentes.

Resumen

¡Felicitaciones por completar este laboratorio! Ha aprendido los fundamentos de la lógica condicional en JavaScript, una habilidad crucial para cualquier desarrollador.

En este laboratorio, usted:

• Ha utilizado la declaración if para ejecutar código basado en una única condición.
• Ha agregado una cláusula else para manejar el caso alternativo.
• Ha implementado else if para gestionar múltiples condiciones secuenciales.
• Ha comprendido y aplicado el operador de igualdad flexible (==), que realiza conversión de tipos.
• Ha comprendido y aplicado el operador de igualdad estricta (===), que verifica tanto el valor como el tipo, y es la opción recomendada para la mayoría de las comparaciones.

Dominar las sentencias condicionales le permite escribir código inteligente, receptivo y capaz de manejar una amplia variedad de escenarios.