Tutorial: condicionales en JavaScript - un semáforo de decisiones

Tu código, igual que tú, necesita tomar decisiones todo el día: "si el usuario está logueado, muestra esto; si no, muestra esto otro". Eso se llama una condicional, y hoy vas a construir un semáforo con ellas.

Paso 1: el if más simple

const color = 'rojo';

if (color === 'rojo') {
  console.log('Detente');
}

if (condición) ejecuta el bloque solo si la condición es verdadera (true). Si color no fuera 'rojo', no pasaría nada. Emocionante, lo sé.

Paso 2: agrega un else

if (color === 'rojo') {
  console.log('Detente');
} else {
  console.log('Puedes avanzar');
}

else es el plan B: se ejecuta cuando el if es falso. Ahora tu código siempre dice algo, en vez de quedarse callado como cuando te preguntan si viste el mensaje.

Paso 3: encadena varias opciones con else if

function semaforo(color) {
  if (color === 'rojo') {
    return 'Detente';
  } else if (color === 'amarillo') {
    return 'Prepárate';
  } else if (color === 'verde') {
    return 'Avanza';
  } else {
    return 'Color desconocido';
  }
}

console.log(semaforo('amarillo')); // 'Prepárate'

else if te permite revisar varias condiciones en orden, de arriba hacia abajo, hasta que una sea verdadera. El último else es tu red de seguridad para cuando nada más aplica (como cuando alguien te manda un color que no existe, porque siempre hay alguien).

Reto extra

Modifica semaforo para que, si le pasas un color en mayúsculas ('ROJO'), también funcione correctamente. Pista: busca el método .toLowerCase().

¿Qué acabas de aprender?

• Cómo usar if, else y else if para tomar decisiones.
• Que las condiciones se evalúan en orden, de arriba hacia abajo.
• Que un buen else final evita que tu código se quede sin respuesta.