Bucles en JavaScript

JavaScript dispone de múltiples tipos de bucles que te permitirán iterar diferentes elementos. En este tutorial vamos a ver cuáles son y cómo puedes utilizarlos, además de ver también uno o varios ejemplos de cada uno de ellos.

Bucle for

El bucle for permite recorrer varios elementos de un array estableciendo un valor inicial, una condición y una acción. Puedes interrumpir el bucle utilizando la sentencia break. Además, también puedes saltar a la siguiente iteración del bucle mediante la sentencia continue.

En el siguiente ejemplo recorremos un array que contiene varias letras y mostramos en la consola tanto la letra como el índice de la iteración actual.

Aquí tienes un ejemplo:

const letras = ['a', 'b', 'c', 'd', 'e'];

for (let i = 0; i < letras.length; i++) {
  
  // Muestra la letra actual
  console.log(letras[i]);

  // Muestra el índice actual
  console.log(i);
}

Bucle forEach

El bucle forEach permite iterar un array. A diferencia del bucle for, aquí el valor del índice siempre serán el de las claves del array, y no podrás usar la sentencia break. Este bucle se define como una función que forma parte de los arrays nativos en JavaScript desde ES5, por lo que para usar este bucle debes usar la función array.forEach.

Aquí tienes un ejemplo:

const letras = ['a', 'b', 'c', 'd', 'e'];

letras.forEach((letra, i) => {

  // Muestra la letra actual
  console.log(letra);

  // Muestra el índice actual
  console.log(i);
})

En caso de que solamente te interesen los elementos del array y no las claves, puedes acortar la función e incluso escribirla en una sola línea sin llaves de apertura o cierre:

letras.forEach(letra => console.log(letra));

Bucle for in

Este bucle se usa para iterar las propiedades de un objeto, obteniendo en cada iteración del nombre de cada propiedad en la variable definida. También puedes usar este bucle con un array, en cuyo caso recorrerás las claves del array, ya que son equivalentes a los nombres de las propiedades de un objeto.

Aquí tienes un ejemplo:

const objeto = { color: 'azul', lados: '6' };

for (let propiedad in objeto) {

  // Muestra la nombre de la propiedad
  console.log(propiedad);

  // Muestra el valor de la propiedad
  console.log(objeto[propiedad]);
}

Bucle for of

Este bucle es similar al bucle forEach, con la diferencia de que en este bucle es posible usar la sentencia break. Fue introducido en ES6 y, a diferencia del bucle forEach, el bucle for of no se incluye como una propiedad de los arrays, sino como un bucle nativo. También puedes usar el bucle for of con un objeto, obteniendo el valor de cada propiedad en cada iteración.

La diferencia con en bucle for in es que, mientras que en bucle for in iteras los nombres de las propiedades, en el bucle for of iteras los valores de las propiedades.

Aquí tienes un ejemplo.

const letras = ['a', 'b', 'c', 'd', 'e'];
for (const letra of letras) {

  // Muestra la letra actual  
  console.log(letra);
}

También es posible obtener el índice mediante la función entries:

const letras = ['a', 'b', 'c', 'd', 'e'];

for (const [i, letra] of letras.entries()) {

  // Muestra el índice actual
  console.log(i);

  // Muestra la letra actual
  console.log(letra);
}

Si quieres obtener más información acerca de este bucle, consulta el siguiente tutorial, en el que explicamos con más detalle cómo funciona el bucle for of

• Tutorial del bucle for of: Qué es y cómo se utiliza el bucle for of en JavaScript

Bucle while

Este bucle se ejecutará siempre que se cumpla la condición definida. Es importante que la condición se cumpla en algún momento, siendo algo que debería suceder en el interior del bucle. Es posible usar la sentencia break para interrumpir el bucle, y también la sentencia continue para avanzar a la siguiente iteración.

Aquí tienes un ejemplo:

const letras = ['a', 'b', 'c', 'd', 'e'];
let i = 0;

while (i < letras.length) {

  // Muestra la letra actual
  console.log(letras[i]);

  // Muestra el índice actual
  console.log(i);
  i = i + 1;
}

Bucle do while

Este bucle, al igual que el bucle while, se ejecutará siempre que se cumpla la condición definida. A diferencia del bucle while, que podría no llegar a ejecutarse si no se cumple al condición especificada, en bucle do while se ejecutará al menos una vez, ya que la condición se comprueba el final del bucle.

Es posible usar la sentencia break para interrumpir el bucle y también la sentencia continue par avanzar a la siguiente iteración.

Aquí tienes un ejemplo.

const letras = ['a', 'b', 'c', 'd', 'e'];
let i = 0;
do {

  // Muestra la letra actual
  console.log(letras[i]);

  // Muestra el índice actual
  console.log(i);
  i = i + 1;
} while (i < letras.length);

Y esto ha sido todo.

---