Bucles: for, while y do...while

Al finalizar esta lección serás capaz de:

• Crear bucles for, while y do-while para repetir código de forma controlada
• Utilizar for...of para iterar sobre arrays y strings
• Utilizar for...in para iterar sobre propiedades de objetos
• Aplicar break y continue para controlar el flujo dentro de los bucles
• Reconocer y evitar bucles infinitos

Los bucles (loops) permiten ejecutar un bloque de código múltiples veces sin tener que escribirlo repetidamente. El bucle for es el más utilizado cuando sabés de antemano cuántas veces querés repetir algo.

Sintaxis del for clásico

// for (inicialización; condición; actualización)
for (let i = 0; i < 5; i++) {
  console.log(`Iteración ${i}`);
}
// Iteración 0
// Iteración 1
// Iteración 2
// Iteración 3
// Iteración 4

Descompongamos las tres partes:

1. Inicialización (let i = 0): se ejecuta UNA vez antes del loop
2. Condición (i < 5): se evalúa ANTES de cada iteración. Si es false, el loop termina
3. Actualización (i++): se ejecuta DESPUÉS de cada iteración

Iterando sobre arrays con for

const frutas = ["manzana", "banana", "cereza", "durazno", "kiwi"];

for (let i = 0; i < frutas.length; i++) {
  console.log(`${i + 1}. ${frutas[i]}`);
}
// 1. manzana
// 2. banana
// 3. cereza
// 4. durazno
// 5. kiwi

// Iterar en reversa
for (let i = frutas.length - 1; i >= 0; i--) {
  console.log(frutas[i]);
}
// kiwi, durazno, cereza, banana, manzana

// Iterar de 2 en 2
for (let i = 0; i < 20; i += 2) {
  console.log(i); // 0, 2, 4, 6, 8, 10, 12, 14, 16, 18
}

Ejemplo práctico: tabla de multiplicar

function tablaMultiplicar(numero) {
  console.log(`\n=== Tabla del ${numero} ===");
  for (let i = 1; i <= 10; i++) {
    const resultado = numero * i;
    console.log(`${numero} x ${i} = ${resultado}`);
  }
}

tablaMultiplicar(7);

For anidados (loops dentro de loops)

// Crear un patrón de asteriscos
for (let fila = 1; fila <= 5; fila++) {
  let linea = "";
  for (let col = 0; col < fila; col++) {
    linea += "* ";
  }
  console.log(linea);
}
// *
// * *
// * * *
// * * * *
// * * * * *

// Buscar un valor en una matriz (array 2D)
const matriz = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

const buscado = 5;
for (let fila = 0; fila < matriz.length; fila++) {
  for (let col = 0; col < matriz[fila].length; col++) {
    if (matriz[fila][col] === buscado) {
      console.log(`Encontrado ${buscado} en posición [${fila}][${col}]`);
    }
  }
}

for...of: iterar sobre valores

for...of es la forma moderna y más limpia de iterar sobre arrays, strings y cualquier objeto iterable:

const colores = ["rojo", "verde", "azul"];

// for clásico (más verboso)
for (let i = 0; i < colores.length; i++) {
  console.log(colores[i]);
}

// for...of (más limpio)
for (const color of colores) {
  console.log(color);
}
// rojo, verde, azul

// Iterar sobre caracteres de un string
const palabra = "JavaScript";
for (const letra of palabra) {
  console.log(letra);
}
// J, a, v, a, S, c, r, i, p, t

// Si necesitás el índice también, usá entries()
for (const [indice, color] of colores.entries()) {
  console.log(`${indice}: ${color}`);
}
// 0: rojo
// 1: verde
// 2: azul

for...in: iterar sobre propiedades de objetos

for...in recorre las propiedades enumerables de un objeto:

const persona = {
  nombre: "Ana",
  edad: 28,
  profesion: "Desarrolladora",
  ciudad: "Buenos Aires"
};

for (const propiedad in persona) {
  console.log(`${propiedad}: ${persona[propiedad]}`);
}
// nombre: Ana
// edad: 28
// profesion: Desarrolladora
// ciudad: Buenos Aires

// ⚠️ NO uses for...in con arrays — puede dar resultados inesperados
const arr = ["a", "b", "c"];
// ❌ for (const i in arr) — itera sobre INDICES como strings
// ✅ for (const item of arr) — itera sobre VALORES

while: repetir mientras se cumpla una condición

Usá while cuando no sabés de antemano cuántas veces necesitás iterar:

// Ejemplo: lanzar un dado hasta sacar 6
let intentos = 0;
let dado;

while (dado !== 6) {
  dado = Math.floor(Math.random() * 6) + 1;
  intentos++;
  console.log(`Intento ${intentos}: salió ${dado}`);
}
console.log(`¡Sacaste 6 en ${intentos} intentos!`);

// Ejemplo: dividir un número hasta que sea menor a 1
let numero = 1000;
let pasos = 0;
while (numero >= 1) {
  numero /= 2;
  pasos++;
}
console.log(`Se necesitaron ${pasos} divisiones`); // 10

do...while: ejecutar al menos una vez

A diferencia de while, do...while ejecuta el bloque AL MENOS una vez antes de evaluar la condición:

// Pedir input hasta que sea válido (simulado)
let inputValido = false;
let intentos = 0;

do {
  intentos++;
  // Simular input del usuario
  const input = intentos === 3 ? "correcto" : "";
  inputValido = input.length > 0;
  
  if (!inputValido) {
    console.log("Input vacío. Intentá de nuevo.");
  }
} while (!inputValido);

console.log(`Input válido después de ${intentos} intentos`);

break y continue: control fino del bucle

// break: salir del bucle completamente
const numeros = [1, 5, 3, 8, 2, 9, 4];

for (const num of numeros) {
  if (num > 7) {
    console.log(`Encontrado número mayor a 7: ${num}`);
    break; // Sale del bucle al encontrar el primero
  }
}

// continue: saltar a la siguiente iteración
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) continue; // Saltar pares
  console.log(i); // 1, 3, 5, 7, 9
}

// Ejemplo práctico: procesar solo items válidos
const pedidos = [
  { id: 1, total: 500, estado: "pagado" },
  { id: 2, total: 0, estado: "cancelado" },
  { id: 3, total: 1200, estado: "pagado" },
  { id: 4, total: 300, estado: "pendiente" },
  { id: 5, total: 800, estado: "pagado" },
];

let totalVentas = 0;
for (const pedido of pedidos) {
  if (pedido.estado !== "pagado") continue; // Solo procesar pagados
  totalVentas += pedido.total;
  console.log(`Pedido #${pedido.id}: $${pedido.total}`);
}
console.log(`Total ventas: $${totalVentas}`); // $2500

Cuidado con los bucles infinitos

// ❌ BUCLE INFINITO — cuelga el navegador/programa
// while (true) {
//   console.log("Esto nunca termina");
// }

// ❌ BUCLE INFINITO — la condición nunca se vuelve false
// let i = 0;
// while (i < 10) {
//   console.log(i);
//   // Falta i++ para que i eventualmente llegue a 10
// }

// ✅ Siempre asegurate de que:
// 1. La condición eventualmente sea false
// 2. La variable de control se actualice en cada iteración
// 3. Si usás while(true), hay un break que lo detenga

1. Off-by-one errors: Usar <= cuando debería ser < (o viceversa). for (let i = 0; i <= arr.length) va a dar error porque el índice máximo es arr.length - 1.

2. Modificar un array mientras lo iterás: Agregar o quitar elementos de un array dentro de un for que lo recorre puede causar comportamiento impredecible.

3. Usar for...in con arrays: for...in está diseñado para objetos. Con arrays usá for...of o el for clásico.

4. Bucles infinitos por error en la condición: Siempre verificá que tu variable de control cambie en cada iteración.

5. No usar const en for...of: Podés usar const en for (const item of array) porque se crea una nueva variable en cada iteración.

1. for clásico es ideal cuando sabés cuántas iteraciones necesitás.
2. for...of es la forma moderna y limpia de iterar sobre arrays y strings.
3. for...in itera sobre propiedades de objetos — no lo uses con arrays.
4. while se usa cuando no sabés cuántas iteraciones serán necesarias.
5. do...while garantiza al menos una ejecución del bloque.
6. break sale del bucle completamente; continue salta a la siguiente iteración.
7. Siempre verificá que tus bucles tengan una condición de salida para evitar loops infinitos.

1. ¿Cuál es la diferencia principal entre while y do...while?
a) while es más rápido
b) do...while ejecuta el bloque al menos una vez
c) while solo funciona con números
d) No hay diferencia

2. ¿Qué método se usa para obtener índice y valor en for...of?
a) .index()
b) .entries()
c) .map()
d) .forEach()

3. ¿Qué hace continue dentro de un bucle?
a) Termina el bucle
b) Pausa el bucle
c) Salta a la siguiente iteración
d) Reinicia el bucle desde cero

4. ¿Cuántas veces se ejecuta este bucle: for (let i = 0; i < 3; i++)?
a) 2
b) 3
c) 4
d) Infinitas

5. ¿Cuál es la forma correcta de iterar sobre un array?
a) for (const item in array)
b) for (const item of array)
c) for (const item = array)
d) for (item : array)

Respuestas: 1-b, 2-b, 3-c, 4-b, 5-b

Ejercicio práctico

Misión: Juego de adivinanza de números

Creá un programa que:

1. Genere un número aleatorio entre 1 y 100
2. Simule un jugador que intenta adivinarlo (podés usar un algoritmo de búsqueda binaria o intentos aleatorios)
3. Después de cada intento, indique si el número secreto es mayor o menor
4. Cuente los intentos necesarios
5. Muestre un mensaje final con el resultado
6. Use do...while para el loop principal y break cuando adivine

const numeroSecreto = Math.floor(Math.random() * 100) + 1;
let intentos = 0;
let adivinado = false;
// ... completá el juego