El bucle for de JavaScript

En este tutorial vamos a ver cómo funciona el bucle for of de JavaScript, que es uno de los más útiles según mi punto de vista. Este bucle combina las ventajas del bucle forEach junto las habilidad de usar la sentencia break de los bucles for de toda la vida.

En este ejemplo creamos un bucle for of básico para que puedas ver su sintaxis:

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

for (const letra of letras) {
  console.log(letra);
}

Sentencia break

A diferencia del bucle forEach, podrás usar la sentencia break para romper el bucle en cualquier momento, tal y como puedes ver en este ejemplo:

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

for (const letra of letras) {
  console.log(letra);
  if (letra === 'c') {
    break;
  }
}

De esta forma, el bucle finalizará su ejecución cuando se llege a la iteración en la que la variable letra tiene el valor 'c',  momento en el que se ejecutará la sentencia break.

Sentencia continue

Además de usar la sentencia break, que finalizará la ejecución del bucle, también puedes usar la sentencia continue, que simplemetne se saltará la iteración actual, pasando a al siguiente:

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

for (const letra of letras) {
  if (letra === 'c') {
    continue;
  }
  console.log(letra);
}

De este modo, se imprimirán por la consola todas las letras del ejemplo anterior a excepción de la letra 'c'.

Función entries()

En caso de que necesites obtener el índice del elemento actual y no solamente su valor, puedes usar la función entries(), tal y como puedes ver en este ejemplo:

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

for (const [indice, letra] of letras.entries()) {
  console.log(indice);
  console.log(letra);
}

El código de este ejemplo mostrará por la consola tanto el índice de la letra actual como su valor.

Si te fijas, hemos usado const en lugar de let, ya que el bucle for of crea un nuevo ámbito o contexto con cada nueva iteración, de modo que podemos usar const en lugar de let sin temor a obtener algún error.

Si quieres, puedes obtener información acerca de otros bucles de JavaScript en el siguiente tutorial:

• Bucles en JavaScript: Bucles de JavaScript en Detalle

---