Bucle for en JavaScript

El bucle for es una herramienta en JavaScript que nos permite manejar tareas repetitivas, especialmente cuando se conoce de antemano el número exacto de iteraciones necesarias. Es una estructura compacta y poderosa que combina la inicialización de variables, la evaluación de una condición y la actualización del contador en una sola línea.

Esta guía explica cómo funciona, cómo utilizarlo y las diversas formas en las que puede adaptarse a diferentes escenarios en la programación.

Estructura del bucle for

El bucle for en JavaScript es una estructura de control que permite ejecutar un bloque de código con un número específico de veces. La sintaxis básica es la siguiente:

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

La estructura de un bucle for se divide en tres partes principales:

1. Inicialización: Se ejecuta una vez antes de que comience el bucle y se utiliza para definir y asignar un valor inicial a la variable de control.
2. Condición: Se evalúa antes de cada iteración. Si la condición es true, el bucle continúa; si es false, el bucle termina.
3. Actualización: Se ejecuta después de cada iteración del bloque de código, generalmente para incrementar o modificar la variable de control.

Ejemplo básicos del bucle for

A continuación veamos algunos ejemplo básicos de uso para esta estructura de repetición.

Imprimir números del 1 al 5:

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

El bucle anterior empieza con i igual a 1, y mientras i sea menor o igual a 5, se incrementa i en 1 en cada iteración. El bloque de código imprime el valor de i en cada iteración. Este tipo de bucle se utiliza comúnmente para ejecutar una acción un número fijo de veces, como generar elementos en una interfaz gráfica.

Sumar los primeros 10 números

let sum = 0;

for (let i = 1; i <= 10; i++) {
  sum += i;
}

console.log('La suma es:', sum);

En este ejemplo se inicializa una variable sum en 0. Luego, el bucle for itera desde 1 hasta 10, sumando cada número a sum. Al final, imprime la suma de los primeros 10 números.

Iterar sobre un array

El bucle for es una de las formas más utilizadas para recorrer elementos en un array. Veamos cómo funciona:

const fruits = ['Manzana', 'Banana', 'Naranja', 'Mango'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

En el anterior ejemplo el bucle itera a través del array fruits. La condición i < fruits.length asegura que el bucle se detenga una vez que se hayan recorrido todos los elementos del array. En cada iteración, se imprime el elemento actual del array.

Este enfoque es ideal para procesar listas, como mostrar productos en un catálogo o elementos en un carrito de compras.

Bucle anidado (matrices bidimensionales)

Los bucles anidados permiten trabajar con estructuras más complejas, como matrices.

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]);
  }
}

En el ejemplo anterior el bucle externo itera a través de cada fila de la matriz y el bucle interno itera a través de cada elemento de la fila actual. Se imprime cada elemento de la matriz. Este patrón se utiliza para procesar datos tabulares o mapas en videojuegos.

Declaración break y continue en bucles for

Puedes usar las declaraciones break y continue para controlar el flujo de un bucle for.

Uso de break:

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break; // Sale del bucle cuando i es igual a 5
  }
  console.log(i);
}

Este bucle imprime los números del 1 al 4. Cuando i es igual a 5, la declaración break hace que el bucle termine.

Uso de continue:

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue; // Salta a la siguiente iteración cuando i es par
  }
  console.log(i);
}

Este bucle imprime solo los números impares del 1 al 10. Cuando i es par, la declaración continue hace que el bucle salte a la siguiente iteración, omitiendo el console.log(i).

Usando el bucle for sin el inicializador

Aunque no es común, puedes omitir la inicialización, la condición o ambas en un bucle for. Esto puede ser útil en casos especiales, pero debes usarlo con cuidado para evitar bucles infinitos.

Para hacer esto podemos declarar la variable de control fuera del bucle.

let i = 0;

for (; i < 5; i++) {
  console.log(i);
}

En este caso, la variable i se declara e inicializa fuera del bucle. El bucle sigue funcionando normalmente, iterando mientras i sea menor que 5.

Usando el bucle for sin la condición

También puedes omitir la condición en un bucle for, creando un bucle infinito a menos que se utilice una declaración break dentro del bucle.

for (let i = 0;; i++) {
  if (i > 5) {
    break; // Termina el bucle cuando i es mayor que 5
  }
  console.log(i);
}

En el bloque anterior el bucle for no tiene una condición explícita, lo que lo hace infinito. La declaración break se usa para salir del bucle cuando i es mayor que 5.

Usando el bucle for sin ninguna expresión

Puedes escribir un bucle for sin ninguna de las tres expresiones, aunque generalmente no es recomendable.

let i = 0;

for (;;) {
  if (i > 5) {
    break; // Termina el bucle cuando i es mayor que 5
  }
  console.log(i);
  i++;
}

En este ejemplo, el bucle for no tiene inicialización, condición ni incremento/decremento. Estas operaciones se realizan dentro del bloque de código del bucle.

Usando el bucle for sin cuerpo de bucle

Es posible tener un bucle for sin cuerpo si el trabajo se realiza en las tres expresiones.

let sum = 0;
for (let i = 1; i <= 5; sum += i, i++);
console.log('La suma es:', sum);

En este caso, todas las operaciones (incremento de i y suma de i a sum) se realizan dentro de las expresiones del bucle for. No hay necesidad de un cuerpo de bucle.

Conclusión:

El bucle for en JavaScript ofrece flexibilidad y precisión para manejar tareas repetitivas. Desde operaciones simples como imprimir números hasta la manipulación de estructuras complejas como matrices, este bucle es una herramienta imprescindible para cualquier desarrollador. Asegúrate de utilizarlo de manera adecuada según el contexto, y considera las variaciones más avanzadas (como omitir inicializadores o usar break y continue) solo cuando sean necesarias.

En el siguiente artículo exploraremos la instrucción break en JavaScript, sus diferentes usos y cómo puede controlar el flujo de los bucles y las declaraciones de control de flujo.