Saltar al contenido
condicionales.js · devschool

if, else y switch en JavaScript

Lección 7 de 38 · 3 min de lectura · Actualizado el

En esta lección
  1. if
  2. else
  3. else if
  4. Truthy y falsy
  5. switch
  6. Errores típicos

Hasta ahora el código se ejecutaba línea a línea, siempre igual. Con los condicionales el programa toma decisiones: hace una cosa u otra según los datos.

if

const temperatura = 30;

if (temperatura > 25) {
  console.log("Hace calor");
}

Si la condición entre paréntesis es true, se ejecuta el bloque entre llaves. Si es false, se salta.

else

Lo que se hace cuando la condición no se cumple:

if (edad >= 18) {
  console.log("Puedes pasar");
} else {
  console.log("Lo siento, eres menor de edad");
}

else if

Para varias opciones. Se comprueban en orden y solo se ejecuta la primera que se cumpla:

const hora = 15;

if (hora < 12) {
  console.log("Buenos días");
} else if (hora < 20) {
  console.log("Buenas tardes");
} else {
  console.log("Buenas noches");
}

Con hora = 15, la primera condición es falsa y la segunda verdadera: sale “Buenas tardes” y no se mira nada más. Por eso el orden importa.

Truthy y falsy

La condición de un if no tiene por qué ser un booleano. JavaScript convierte cualquier valor en true o false. Estos valores cuentan como falsos (falsy):

false, 0, "", null, undefined, NaN

Todo lo demás es verdadero (truthy), incluido "0", "false" o un array vacío []. Esto permite atajos como:

const nombre = "";
if (!nombre) {
  console.log("Escribe tu nombre");
}

switch

Cuando comparas una misma variable con muchos valores concretos, switch queda más ordenado que una cadena de else if:

const dia = "sábado";

switch (dia) {
  case "sábado":
  case "domingo":
    console.log("Fin de semana");
    break;
  case "viernes":
    console.log("Casi fin de semana");
    break;
  default:
    console.log("Día laborable");
}
  • Cada case es un valor posible.
  • break sale del switch. Si lo olvidas, se siguen ejecutando los casos de abajo. A veces se hace a propósito, como con “sábado” y “domingo”.
  • default se ejecuta si no coincide ningún caso.

Cuando dejas que un caso “caiga” en el siguiente a propósito, como con sábado y domingo, conviene indicarlo con un comentario (// sin break a propósito), para que nadie piense que es un olvido.

switch (true): comparar rangos

switch compara con ===, así que no sirve directamente para rangos como “entre 5 y 7”. Hay un truco muy usado: poner true en el switch y condiciones en cada case. Se ejecuta el primer case cuya condición sea verdadera:

const nota = 6.5;
let calificacion;

switch (true) {
  case nota >= 9:
    calificacion = "Sobresaliente";
    break;
  case nota >= 7:
    calificacion = "Notable";
    break;
  case nota >= 5:
    calificacion = "Aprobado";
    break;
  default:
    calificacion = "Suspenso";
}

Es equivalente a la cadena de else if. Elige la que te resulte más legible.

Errores típicos

  • Usar = en lugar de ===: if (edad = 18) no compara, asigna 18 a edad y siempre es verdadero.
  • Poner las condiciones en mal orden: si compruebas nota >= 5 antes que nota >= 9, un 10 saldrá como “Aprobado”.
  • Olvidar el break en un switch.
  • Comparar texto con distinto formato: "Sábado" === "sábado" es false. Normaliza antes con .toLowerCase().

Pruébalo tú

Cambia el código y pulsa Ejecutar (o Ctrl + Enter).

condicionales.js
Consola

Pon a prueba lo que has aprendido

[JavaScript] ¿Qué muestra la consola?
const nota = 10;
if (nota >= 5) console.log("Aprobado");
else if (nota >= 9) console.log("Sobresaliente");

[JavaScript] ¿Qué problema tiene este código?
if (edad = 18) {
  console.log("Tienes 18");
}

¿Te ha quedado claro? Márcala y verás tu progreso en el explorador.