Marc Semper Lloret
← JavaScript: el lenguaje

Sesión 4 · Semana 2

Condicionales

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo se escribe una decisión: if, else if, switch y el operador ternario.
  2. 2. Haz: Traduce a código las reglas de negocio de tu proyecto.
  3. 3. Comprueba: Tus condiciones cubren todos los casos, incluidos los límites.

Antes de empezar · 5 minutos, sin apuntes

  1. Escribe en castellano tres reglas de tu proyecto («si el pedido supera 50 €, el envío es gratis»).
  2. ¿Qué pasa exactamente cuando el pedido vale 50?
  3. ¿Qué valores hacen que un if no entre aunque el dato exista?

La decisión más simple

const total = 62;

if (total >= 50) {
  console.log("Envío gratuito");
} else {
  console.log(`Envío: 4,95 € (te faltan ${(50 - total).toFixed(2)} €)`);
}

Con varios casos:

if (stock === 0) {
  estado = "Agotado";
} else if (stock < 5) {
  estado = "Últimas unidades";
} else {
  estado = "Disponible";
}

El orden de las ramas es parte de la lógica

Un else if solo se evalúa si todo lo anterior fue falso. Si pones primero stock < 5, el caso stock === 0 no se alcanza nunca, porque el cero también es menor que cinco.

Ordena siempre de lo más específico a lo más general, y compruébalo con el caso límite: 0, 5, 50, el valor exacto de la frontera.

Los límites, uno por uno

Casi todos los errores de condicionales están en la frontera. Para la regla «envío gratis a partir de 50 €», prueba con 49,99, con 50 y con 50,01. Si la regla dice «a partir de», es >=. Si dice «más de», es >.

Se dice Se escribe
A partir de 50 total >= 50
Más de 50 total > 50
Hasta 50 total <= 50
Entre 10 y 20, incluidos n >= 10 && n <= 20

Una advertencia: 10 <= n <= 20 no hace lo que parece. Se evalúa por partes y acaba comparando un booleano con un número.

El ternario, para elegir un valor

const etiqueta = stock > 0 ? "Disponible" : "Agotado";

Sirve cuando el if solo elige entre dos valores. Si dentro hay varias instrucciones, o si necesitas anidar ternarios, usa un if: se lee mucho mejor.

switch, cuando comparas una cosa contra una lista

switch (categoria) {
  case "teclado":
  case "raton":
    garantia = 24;
    break;
  case "monitor":
    garantia = 36;
    break;
  default:
    garantia = 12;
}

Compara con el triple igual, así que "3" no coincide con 3. Si se omite un break, la ejecución continúa en el caso siguiente: es la fuente de errores clásica de esta estructura.

Tarea 4 · Las reglas de tu proyecto

En js/main.js:

  1. Escribe en comentarios cuatro reglas de negocio de tu tema, en castellano.
  2. Tradúcelas a condicionales.
  3. Añade el cálculo de un estado con tres posibles valores.
  4. Escribe una tabla de casos límite y comprueba cada uno.
  5. Convierte uno de los if de dos ramas en un ternario.
Objetivo mínimoCuatro reglas traducidas, con sus límites comprobados.
Si lo tienesAñade una regla que combine dos condiciones con «y» y otra con «o».
RetoTe dan un if con las ramas en mal orden: encuentra el caso que nunca se alcanza.

Checkpoint · fin de la sesión 4

  • Traduces una regla escrita en castellano a una condición correcta.
  • Compruebas siempre el valor de la frontera.
  • Ordenas las ramas de lo específico a lo general.
  • Sabes cuándo un ternario mejora la lectura y cuándo la empeora.

Antes de cerrar · 2 minutos, sin mirar

  1. «Envío gratis a partir de 50 €»: ¿qué operador?
  2. ¿Por qué 10 <= n <= 20 no funciona?
  3. ¿Qué ocurre si olvidas un break en un switch?
Ver respuestas

1 · Mayor o igual: el 50 exacto entra.

2 · Porque se evalúa por partes: la primera comparación da un booleano, y después se compara ese booleano con 20.

3 · La ejecución continúa en el caso siguiente y se aplican también sus instrucciones.