Bucles - Tutorial de Introducción a la Programación

Resumen Rápido

Los bucles ejecutan un bloque múltiples veces hasta que una condición es falsa o una lista termina. Usa for y while para contadores, y for...of para iterar a través de arreglos limpiamente. Entender cuándo usar cada tipo de bucle hace tu código más limpio y menos propenso a errores.

¿Por Qué Usar Bucles?

Sin bucles, procesar una lista de 100 elementos requeriría 100 líneas de código. Los bucles te permiten procesar cualquier cantidad de elementos con solo unas pocas líneas.

Bucle for

Mejor cuando sabes cuántas veces iterar:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

Estructura: for (inicialización; condición; actualización)

Bucle for...of

Mejor para arreglos e iterables (recomendado):

const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
  console.log(fruit);
}

Bucle for...in

Para propiedades de objetos (usar con cuidado):

const user = { name: "Alice", age: 30 };
for (const key in user) {
  console.log(key + ": " + user[key]);
}

Bucle while

Se ejecuta mientras la condición sea verdadera:

let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

Bucle do...while

Siempre se ejecuta al menos una vez:

let num = 10;
do {
  console.log(num); // Runs once even though condition is false
  num++;
} while (num < 5);

Control de Bucles

break - Sale del bucle inmediatamente:

for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i); // 0, 1, 2, 3, 4
}

continue - Salta a la siguiente iteración:

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i); // 0, 1, 3, 4
}

Patrones Comunes de Bucles

// Sum all numbers
let total = 0;
for (const num of [1, 2, 3, 4, 5]) {
  total += num;
}

// Find an item
let found = null;
for (const item of items) {
  if (item.id === targetId) {
    found = item;
    break;
  }
}

// Transform each item
const doubled = [];
for (const num of numbers) {
  doubled.push(num * 2);
}

Pruébalo Tú Mismo

Aquí tienes un ejemplo práctico que puedes probar. Copia este código y ejecútalo en la consola de tu navegador (presiona F12 para abrir las herramientas de desarrollo) o en el Playground de Código.

// for loop - when you know the count
for (let i = 1; i <= 5; i++) {
  console.log("Count: " + i);
}

// for...of - iterate over arrays (preferred)
const colors = ["red", "green", "blue"];
for (const color of colors) {
  console.log("Color: " + color);
}

// while loop - when condition determines end
let attempts = 0;
while (attempts < 3) {
  console.log("Attempt " + (attempts + 1));
  attempts++;
}

// Building a new array with a loop
const numbers = [1, 2, 3, 4, 5];
const squared = [];
for (const num of numbers) {
  squared.push(num * num);
}
console.log(squared); // [1, 4, 9, 16, 25]

// Using break to exit early
for (let i = 0; i < 100; i++) {
  if (i === 5) {
    console.log("Found 5, stopping!");
    break;
  }
}

// Using continue to skip iterations
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) continue; // Skip even numbers
  console.log(i); // 1, 3, 5, 7, 9
}

Puntos Clave

✓Repite acciones sobre listas de datos sin reescribir código.
✓Practica con ejemplos de código reales para solidificar tu comprensión
✓Este concepto construye la base para temas más avanzados