Estructuras de control

Las estructuras de control permiten modificar el flujo de ejecución de un programa. En JavaScript, son fundamentales para tomar decisiones, repetir tareas y construir lógica condicional y repetitiva de forma precisa.

Condicionales

if / else

Permite ejecutar un bloque de código u otro según si una condición se evalúa como verdadera o falsa.

const age = 20;

if (age >= 18) {
  console.log("You can vote");
} else {
  console.log("Too young to vote");
}

else if

Permite encadenar múltiples condiciones y ejecutar diferentes bloques según cuál se cumpla primero.

const score = 85;

if (score >= 90) {
  console.log("A grade");
} else if (score >= 80) {
  console.log("B grade");
} else {
  console.log("Below B");
}

switch

Evalúa un mismo valor contra múltiples posibles casos. Útil para condiciones exactas.

const fruit = "apple";

switch (fruit) {
  case "banana":
    console.log("Yellow fruit");
    break;
  case "apple":
    console.log("Red or green fruit");
    break;
  default:
    console.log("Unknown fruit");
}

Bucles

while

Ejecuta un bloque de código mientras la condición se mantenga verdadera.

let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

do...while

Igual que while, pero garantiza que el bloque se ejecuta al menos una vez.

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 3);

for

Bucle con contador. Se ejecuta mientras una condición sea verdadera, con control explícito del índice.

for (let i = 0; i < 3; i++) {
  console.log(i);
}

for...of

Itera sobre los valores de un iterable (array, string, Set, Map).

const colors = ["red", "green", "blue"];

for (const color of colors) {
  console.log(color);
}

for...in

Itera sobre las claves (propiedades enumerables) de un objeto.

const user = { name: "Ana", age: 30 };

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

for...in vs for...of

Nota sobre arrays dispersos (sparse arrays)

const arr = [];
arr[3] = 'x';

Un array disperso tiene huecos (índices no definidos). for...in recorre los índices definidos, incluso si están vacíos. for...of ignora esos huecos.

for (const i in arr) {
  console.log(i); // 3
}

for (const value of arr) {
  console.log(value); // undefined x
}

Operador ternario

Forma corta de un if/else para asignaciones o evaluaciones simples.

const age = 18;
const result = (age >= 18) ? "Adult" : "Minor";

Evita ternarios anidados o difíciles de leer. Usa if/else si necesitas claridad o varias condiciones.

break y continue

break

Rompe completamente la ejecución de un bucle.

for (let i = 0; i < 5; i++) {
  if (i === 3) break;
  console.log(i);
}

continue

Salta a la siguiente iteración del bucle.

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}

Cuándo usar cada uno

for...of vs forEach

• Usa for...of si necesitas cortar la ejecución con break o continue.
• Usa forEach para transformaciones simples donde no necesitas controlar el flujo.

switch vs if/else

• switch: cuando comparas un mismo valor contra varios casos fijos.
• if/else: cuando necesitas evaluar condiciones complejas o rangos.

Ternario vs if/else

• Usa ternario para condiciones simples y asignaciones directas.
• Evita ternarios con más de dos ramas o con lógica anidada.
• Si necesitas claridad o varias condiciones, usa if/else.

Trampas comunes

• Olvidar el break en un switch: provoca ejecuciones encadenadas.
• Usar == en vez de ===: puede dar resultados inesperados (coercion).
• Bucles infinitos por olvidar incrementar la variable de control.
• Recorrer un array con for...in: puede incluir propiedades añadidas manualmente.
• Modificar un array mientras lo recorres con for: puede romper los índices.

Enlaces útiles

• MDN: Control Flow
• MDN: Loops and Iteration
• JavaScript.info - Logical Operators