Un programa que solo ejecuta pasos en orden hace siempre lo mismo. Las estructuras de control le permiten decidir (si pasa esto, haz aquello) y repetir (haz esto 50 veces). Son la traducción directa de lo que dibujaste en pseudocódigo en la lección Algoritmos, pensar paso a paso.

const luminosidadFondo = 30;
let colorTexto;

if (luminosidadFondo < 50) {
  colorTexto = "white";
} else {
  colorTexto = "black";
}
console.log(colorTexto);   // white

• La condición va entre paréntesis y tiene que dar true o false.
• El bloque entre llaves se ejecuta solo si la condición se cumple; el else (opcional), si no.

Para más de dos casos, encadena else if. Se comprueban en orden y solo se ejecuta el primero que se cumple:

const ancho = 820;
let columnas;

if (ancho >= 1200) {
  columnas = 4;
} else if (ancho >= 768) {
  columnas = 3;
} else if (ancho >= 480) {
  columnas = 2;
} else {
  columnas = 1;
}
// columnas vale 3

¿Te suena? Es la misma lógica que las media queries de CSS (lección Diseño adaptable), pero escrita como programa.

Cuando comparas una misma variable con varios valores concretos, switch queda más claro:

const categoria = "motion";
let icono;

switch (categoria) {
  case "branding":
    icono = "🅱️";
    break;
  case "web":
    icono = "🌐";
    break;
  case "motion":
    icono = "🎞️";
    break;
  default:
    icono = "📁";
}

No olvides el break al final de cada caso: sin él, el programa sigue ejecutando los casos de debajo.

El bucle for repite un bloque un número de veces conocido. Tiene tres partes, separadas por punto y coma:

for (let i = 0; i < 5; i++) {
  console.log(`Forma número ${i}`);
}

1. Inicio (let i = 0): se ejecuta una vez, antes de empezar. i es el contador.
2. Condición (i < 5): se comprueba antes de cada vuelta; si es false, el bucle termina.
3. Actualización (i++): se ejecuta al final de cada vuelta.

Este bucle muestra Forma número 0 hasta Forma número 4: cinco vueltas, porque se empieza a contar en 0. Un ejemplo de diseño, la escala tipográfica de la lección Algoritmos, pensar paso a paso:

let medida = 16;
for (let nivel = 1; nivel <= 5; nivel++) {
  console.log(`Nivel ${nivel}: ${medida.toFixed(2)} px`);
  medida = medida * 1.25;
}

toFixed(2) muestra el número con dos decimales.

while repite mientras se cumpla una condición. Úsalo cuando no sabes cuántas vueltas hacen falta:

// ¿Cuántas veces hay que multiplicar por 1,25 para pasar de 16 a más de 100?
let medida = 16;
let pasos = 0;
while (medida <= 100) {
  medida = medida * 1.25;
  pasos++;
}
console.log(pasos);   // 9

⚠️ Atención. Si la condición de un while nunca llega a ser falsa, el bucle no termina y la pestaña se cuelga (bucle infinito). Comprueba siempre que dentro del bucle cambia algo que acerca la salida. Si te pasa, cierra la pestaña y revisa el código.

break sale de un bucle en el acto y continue salta a la siguiente vuelta. Úsalos con moderación: un bucle con una condición clara se entiende mejor.

• Uno de más o de menos: i <= 5 da seis vueltas si empiezas en 0. Cuenta con los dedos las primeras y la última.
• if (x = 5) asigna en lugar de comparar; es if (x === 5).
• Olvidar el break en un switch.
• Declarar con const el contador de un for (for (const i = 0; …; i++) falla): usa let.
• Un ; justo después de if (…) o de for (…): el bloque se queda vacío y lo de dentro se ejecuta siempre.