Bucles e Iteraciones en JavaScript

Los bucles y las iteraciones son herramientas fundamentales en JavaScript para automatizar tareas repetitivas. Permiten ejecutar un bloque de código varias veces, ya sea un número definido de veces o hasta que se cumpla una condición.

1. Conceptos Básicos

• Bucle (loop): Una estructura de control que repite un bloque de código hasta que se cumpla una condición o se alcance un número determinado de iteraciones.
• Iteración: Cada ejecución del bloque de código dentro del bucle.

Componentes de un bucle:

• Condición: Una expresión booleana que determina si el bucle continúa ejecutándose.
• Cuerpo del bucle: El bloque de código que se ejecuta en cada iteración.
• Inicialización: Una expresión opcional que se ejecuta antes de la primera iteración (comúnmente usada para inicializar variables de control).
• Actualización: Una expresión opcional que se ejecuta al final de cada iteración (comúnmente usada para actualizar variables de control).

2. Tipos de Bucles en JavaScript

for

Bucle genérico que se utiliza para iterar un número fijo de veces o con condiciones personalizadas.

Sintaxis:

for (Inicialización; condicion; Actualización) {
  // Bloque de código
}

Características

• Muy flexible: puedes controlar manualmente como iterar (en el apartado de Actualización, incrementar, decrementar, etc)
• Requiere índices para acceder a los elementos de un array
• Útil para iterar sobre estructuras como arrays y realizar cálculos basados en índices

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

forEach

Un método específico de arrays que ejecuta una función por cada elemento del array

Sintaxis:

array.forEach((elemento) => {
  // Bloque de código
});

Características

• Solo funciona con arrays
• No se puede interrumpir (break o continue no funcionan)
• Es más legible
• No devuelve un nuevo array; simplemente ejecuta una acción para cada elemento

const array = [1, 2, 3];

array.forEach((num) => {
  console.log(num);
});

for…of

Un bucle diseñado para iterar directamente sobre valores de objetos iterables, como arrays, cadenas, conjuntos(set), mapas(maps), etc.

Sintaxis:

for (const valor of iterable) {
  // Bloque de código
}

Características

• Devuelve los valores directamente
• Es útil para iterar sobre colecciones iterables (arrays, cadenas, objetos Set, map)
• No proporciona acceso a los índices del array

const array = [1, 2, 3];

for (const num of array) {
  console.log(num);
}

for…in

Un bucle diseñado para iterar sobre las propiedades enumerables de un objeto (las claves de las propiedades)

Sintaxis:

for (const propiedad in objeto) {
  // Bloque de código
}

Características

• Devuelve las claves (nombre de las propiedades) de un objeto, no los valores directamente
• Puede recorrer arrays, pero no es ideal porque devuelve los índices como cadenas (no valores)
• Es más adecuado para objetos que no son iterables

const objeto = { a: 1, b: 2, c: 3 };

for (const clave in objeto) {
  console.log(clave, objeto[clave]);
}

Ejemplo con array (no recomendado)

const array = [1, 2, 3];
for (const indice in array) {
  console.log(indice);
}

Diferencias principales

Estructura	Itera sobre	Ideal para	Acceso a índices
for	Índices o rangos	Arrays y estructuras personalizadas	Sí
forEach	Valores	Arrays	No
for...of	Valores	Iterables (arrays, strings, sets, etc.)	No
for...in	Claves o propiedades	Objetos	No (en arrays sí, pero no es ideal)

Nota: Usa for...of para iterar valores y for...in para recorrer propiedades de un objeto.

Rendimiento

En el siguiente Benchmark, podemos ver que el for clásico ofrece un mayor rendimiento, pero tampoco se distancia demasiado de los demás. Por lo que da igual que bucle se utilice (a no ser que tratemos con millones de iteraciones)

Benchmark