1 ‐ Tipos de bucles en JavaScript - Jabes-Gonzalez/Checkpoint-8 GitHub Wiki

¿Qué es un bucle?

Un bucle es una estructura de control que repite una acción varias veces, dependiendo de una condición. Son esenciales para tareas como recorrer listas, procesar datos, automatizar tareas repetitivas y mucho más.

Bucle for

El bucle for es el más utilizado cuando sabemos cuántas veces queremos que se ejecute el bloque de código. Su sintaxis es:

for (inicialización; condición; incremento) {
  // Código a ejecutar en cada iteración
}

Ejemplo:

for (let i = 0; i < 5; i++) {
  console.log("Iteración número: " + i);
}
// Salida: 0, 1, 2, 3, 4

Usos comunes:

• Recorrer arrays.
• Ejecutar bloques de código un número específico de veces.

Ventajas:

• Control total sobre el número de iteraciones.
• Compacto y fácil de leer cuando el número de repeticiones es conocido.

Ejemplo avanzado:

let playlist = [];
let cantidad = 3;
for (let i = 0; i < cantidad; i++) {
  let cancion = prompt("Agrega el nombre de la canción:");
  playlist.push(cancion);
}
console.log("Playlist final:", playlist);

Bucle while

El bucle while se utiliza cuando no sabemos cuántas veces se ejecutará el bloque, pero sí conocemos la condición que debe cumplirse para continuar. Su sintaxis es:

while (condición) {
  // Código a ejecutar mientras la condición sea verdadera
}

Ejemplo:

let i = 0;
while (i < 5) {
  console.log("Valor de i = " + i);
  i++;
}
// Salida: 0, 1, 2, 3, 4

Ventajas:

• Útil cuando el número de iteraciones depende de una condición dinámica.
• Puede provocar bucles infinitos si la condición nunca es falsa.

Bucle do...while

El bucle do...while es similar al while, pero garantiza que el bloque de código se ejecute al menos una vez, ya que la condición se evalúa después de la ejecución inicial. Su sintaxis es:

do {
  // Código a ejecutar
} while (condición);

Ejemplo:

let i = 0;
do {
  console.log("Valor de i = " + i);
  i++;
} while (i < 5);
// Salida: 0, 1, 2, 3, 4

Diferencia clave:

El bloque se ejecuta al menos una vez, incluso si la condición es falsa desde el principio.

Bucle for...in

El bucle for...in recorre todas las propiedades enumerables de un objeto (no recomendado para arrays).

let persona = { nombre: "Ana", edad: 25, ciudad: "Barcelona" };
for (let propiedad in persona) {
  console.log(propiedad + ": " + persona[propiedad]);
}
// Salida: nombre: Ana, edad: 25, ciudad: Barcelona

Ventajas:

• Ideal para recorrer objetos.
• No recomendado para arrays, ya que puede recorrer propiedades heredadas.

Bucle for...of

El bucle for...of recorre los valores de objetos iterables como arrays, strings, maps, sets, etc.

let colores = ["rojo", "verde", "azul"];
for (let color of colores) {
  console.log(color);
}
// Salida: rojo, verde, azul

Ventajas:

• Sintaxis clara y sencilla para recorrer arrays y otros iterables.
• No recorre propiedades de objetos.

Métodos de Array como bucles

JavaScript ofrece métodos de array que permiten recorrer y manipular elementos de manera funcional:

• .forEach()
• .map()
• .filter()
• .reduce()
• .some(), .every()

Ejemplo con .forEach(): Permite ejecutar una función para cada elemento de un array.

let numeros = [1, 2, 3, 4, 5];
numeros.forEach(function(numero) {
  console.log(numero * 2);
});
// Salida: 2, 4, 6, 8, 10

Ventajas:

• Más declarativos y expresivos.
• Evitan errores comunes de los bucles clásicos.

Ejemplo con .map(): Crea un nuevo array con los elementos que cumplen una condición.

const numeros = [1, 2, 3];
const dobles = numeros.map(num => num * 2); 
// [2, 4, 6]

Comparativa de Bucles

Buenas prácticas y recomendaciones

• Usa for cuando conozcas el número exacto de iteraciones.
• Prefiere while o do...while para condiciones dinámicas.
• Utiliza for...in solo para objetos, y for...of para arrays o iterables.
• Considera los métodos de array para operaciones funcionales y limpias.
• Evita bucles infinitos: asegúrate de que la condición de salida pueda cumplirse.
• Documenta tu código usando herramientas como JSDoc para que otros desarrolladores entiendan la intención de tus bucles.

Control de Flujo en Bucles: break, continue y etiquetas

break: Detiene la ejecución del bucle actual por completo, saliendo de la estructura de repetición.

for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);
}
// Imprime del 0 al 4

continue: Salta a la siguiente iteración del bucle, omitiendo el código restante en la iteración actual.

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue;
  console.log(i);
}
// Imprime solo los números impares entre 0 y 9

Etiquetas: Permiten usar break o continue en bucles anidados para salir o continuar en bucles externos.

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === j) continue outer;
    console.log(`i=${i}, j=${j}`);
  }
}

Bucles Infinitos: Cuándo y Cómo Usarlos

Un bucle infinito se produce cuando la condición nunca deja de cumplirse. Se usa while(true) para crear bucles que solo terminan con un break explícito.

while (true) {
  let respuesta = prompt("¿Desea salir? (si/no)");
  if (respuesta === "si") break;
}

Precaución: Los bucles infinitos pueden congelar el navegador o el servidor si no se gestionan correctamente.

Errores Comunes en Bucles

• Olvidar incrementar el contador en un while, lo que puede provocar bucles infinitos.
• Usar for/in para arrays, lo cual puede traer resultados inesperados porque recorre propiedades, no índices.
• Confundir for/in con for/of.
• No establecer una condición de salida válida.

Bucles Anidados

Los bucles pueden estar dentro de otros bucles. Esto es útil para recorrer estructuras bidimensionales como matrices:

const matriz = [
  [1, 2],
  [3, 4]
];
for (let i = 0; i < matriz.length; i++) {
  for (let j = 0; j < matriz[i].length; j++) {
    console.log(matriz[i][j]);
  }
}

Precaución: Los bucles anidados aumentan la complejidad y pueden afectar el rendimiento.

Recomendaciones Finales

• Usa el bucle adecuado según el caso: for para conteos, for/of para arrays, for/in para objetos.
• Prefiere métodos modernos (forEach, map, etc.) para código más legible y funcional.
• Combina bucles con condicionales para lógica compleja y validaciones.
• Practica con ejercicios variados para afianzar conceptos y evitar errores comunes.
• Mantén el código limpio y documentado, y utiliza herramientas de depuración para identificar errores rápidamente.