Bucles en JavaScript: for, forEach, while y do-while

Los bucles en JavaScript permiten ejecutar el mismo código varias veces seguidas. Son útiles cuando necesitas recorrer un array o repetir una tarea concreta un número determinado de veces. En este capítulo vamos a ver los bucles for y while, los más utilizados en JavaScript.

Bucle for en JavaScript

El bucle for de JavaScript ejecuta código un número determinado de veces. Este es un ejemplo de uso del bucle for:

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

El bucle for se inicializa con la variable «i», que vale 0. La condición «i < 5» comprueba si «i» es menor que 5. Si la condición es cierta, se ejecuta el código que hay entre las llaves y la variable «i» se incrementa en 1. El bucle sigue ejecutándose hasta que la condición «i < 5» sea falsa.

El resultado de este código es que se muestran en la consola los números del 0 al 4.

También puedes usar el bucle for para recorrer un array:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

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

El bucle for recorre el array «tableau» usando la propiedad «length» del array para saber cuántos elementos tiene que recorrer. En cada iteración del bucle, el valor del elemento actual se muestra en la consola.

También puedes usar la instrucción «break» para salir de un bucle for antes de tiempo:

for (let i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3) {
    break;
  }
}

Bucle for con continue en JavaScript

Existe además la instrucción «continue», que pasa a la siguiente iteración del bucle sin ejecutar el resto del código de la iteración actual. Este es un ejemplo de uso de la instrucción «continue» con un bucle for:

for (let i = 0; i < 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(i);
}

En este ejemplo, el bucle for recorre los números del 0 al 9. La instrucción «continue» está dentro del bucle y comprueba si el valor de «i» es impar. Si lo es, «continue» pasa a la siguiente iteración sin ejecutar el resto del código de la iteración actual.

El resultado de este código es que se muestran en la consola los números pares del 0 al 8.

Bucle forEach en JavaScript

El bucle forEach de JavaScript recorre los elementos de un array o de un objeto. Este es un ejemplo de uso del bucle forEach con un array:

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

tableau.forEach(function(element) {
  console.log(element);
});

El bucle forEach recorre el array «tableau» y ejecuta para cada elemento la función anónima que recibe como argumento. El valor del elemento actual está disponible dentro de esa función anónima a través de la variable «element».

El resultado de este código es que se muestra en la consola cada elemento del array.

También puedes usar el bucle forEach con objetos, apoyándote en el método «Object.entries()»:

let objet = {
  un: 'valeur1',
  deux: 'valeur2',
  trois: 'valeur3'
};

Object.entries(objet).forEach(function([clé, valeur]) {
  console.log(clé + ': ' + valeur);
});

El método «Object.entries()» devuelve un array de entradas [clave, valor] por cada propiedad del objeto «objet». El bucle forEach de JavaScript recorre ese array y ejecuta la función anónima que recibe como argumento para cada entrada. La clave y el valor están disponibles dentro de la función anónima a través de las variables «clé» y «valeur».

El resultado de este código es que se muestra en la consola cada entrada del array con la forma «clave: valor».

Bucle while en JavaScript

El bucle while de JavaScript ejecuta código mientras la condición indicada sea cierta. Este es un ejemplo de uso del bucle while:

let a = 0;

while (a < 5) {
  console.log(a);
  a++;
}

El bucle while se inicializa con la condición «a < 5». Mientras esa condición sea cierta, se ejecuta el código que hay entre las llaves y la variable «a» se incrementa en 1. El bucle sigue ejecutándose hasta que la condición «a < 5» sea falsa.

El resultado de este código es que se muestran en la consola los números del 0 al 4.

También puedes usar el bucle do-while, que primero ejecuta el código que hay entre las llaves y después comprueba la condición:

let a = 0;

do {
  console.log(a);
  a++;
} while (a < 5);

En este código, el bucle do-while se ejecuta al menos una vez, porque la condición se comprueba después de la primera ejecución del código que hay entre las llaves. El resultado también es que se muestran en la consola los números del 0 al 4.

Tienes que incluir una instrucción que incremente o reduzca la variable usada en la condición del bucle while, para no provocar un bucle infinito. Si te olvidas de ella, la condición seguirá siendo cierta siempre y el bucle se ejecutará indefinidamente.

Para evitarlo, incluye una instrucción que incremente o reduzca la variable usada en la condición del while, de forma que su valor cambie en cada iteración. Así la condición acabará siendo falsa en algún momento y el bucle terminará.

También se puede terminar un bucle antes de que la condición sea falsa con la instrucción «break». La instrucción «break» interrumpe de inmediato la ejecución del bucle y salta a la instrucción siguiente. Este es un ejemplo de uso de la instrucción «break» con un bucle while:

let a = 0;

while (true) {
  console.log(a);
  a++;
  if (a >= 5) {
    break;
  }
}

el bucle while se inicializa con la condición «true», lo que significa que seguirá ejecutándose mientras esa condición sea cierta. Ahora bien, la instrucción «break» está dentro del bucle y se ejecuta cuando el valor de «a» alcanza o supera 5. Eso interrumpe la ejecución del bucle y salta a la instrucción siguiente.

El resultado de este código es que se muestran en la consola los números del 0 al 4.

Conclusión

Hemos recorrido los distintos bucles disponibles en JavaScript: el bucle for, el bucle forEach y el bucle while. Hemos visto cómo usar cada uno de ellos para ejecutar código de forma repetida, y cómo usar instrucciones de control de flujo como «break» y «continue» para dirigir su ejecución.