Javascript guía completa y moderna de bucles

La sintaxis de los bucles Javascript fueron ideados usando los lenguajes famosos de la época como C++ o Java. Había que hacerlos sexy intentando que se pareciera lo máximo a lo que ya existía. Con la nueva versión del estándar, llamada ES6, se ha vuelto a repetir la historia. Nuevos bucles han sido desarrollados para modernizar y mejorar Javascript, usando a otros famosos de referencia como Python, entre otros. Además se puede oler cierto aroma a programación funcional y simplicidad dando un código fácil de entender para seniors y recién llegados.

Bucle de iteración de valor: For-of

De una manera sencilla y amena recorreremos un array, o lista, para obtener su contenido.

for (variable of array/objeto) { ... }

Un ejemplo.

let listaFrameworks = ['Angular', 'React', 'Vue', 'Ember', 'Elm'];

for (const framework of listaFrameworks) {
    console.log(framework);
}
//Angular
//React
//Vue
//Ember
//Elm

Si quisieramos recorrer los números del 0 al 3 podríamos usar la famosa Biblioteca y su función .

for (const num of _.range(4)) {
    console.log(num)
}
//0
//1
//2
//3

En cambio, si necesito obtener las posiciones junto a los valores necesito usar una función nativa llamada entries().

let listaFrameworks = ['Angular', 'React', 'Vue', 'Ember', 'Elm'];
for (const [pos, valor] of listaFrameworks.entries()) {
    console.log(pos + ' esta ' + valor);
}
//0 esta Angular
//1 esta React
//2 esta Vue
//3 esta Ember
//4 esta Elm

Bucle de iteración de clave: For-in

La diferencia radica en la palabra in en lugar de of, por el resto la estructura es igual.

for (variable in array/objeto) { ... }

Su objetivo será la de proporcionarnos las posiciones que ocupa cada elemento. Un ejemplo.

let listaFrameworks = ['Angular', 'React', 'Vue', 'Ember', 'Elm'];

for (const posicion in listaFrameworks) {
    console.log(posicion);
}
//0
//1
//2
//3
//4

Bucle de iteración de clave y valor: forEach

Es muy interesante ya que permite tener lo mejor del for-in y for-of. Nos devuelve la posición y el valor de cada elemento de nuestro array. Aunque es cierto que su estructura difiere a lo anteriormente mencionado.

array.forEach(function callback(valor, posicion, arrayUsado) { ... });

Un ejemplo obtenido los valores y posiciones.

let listaFrameworks = ['Angular', 'React', 'Vue', 'Ember', 'Elm'];
listaFrameworks.forEach((valor, posicion, array) => {
    console.log(posicion + '-' + valor);
});
//0-Angular
//1-React
//2-Vue
//3-Ember
//4-Elm

El argumento array no es más una copia del que estamos recorriendo.

let listaFrameworks = ['Angular', 'React', 'Vue', 'Ember', 'Elm'];
listaFrameworks.forEach((valor, posicion, array) => {
    console.log(array);
});
//['Angular', 'React', 'Vue', 'Ember', 'Elm']
//['Angular', 'React', 'Vue', 'Ember', 'Elm']
//['Angular', 'React', 'Vue', 'Ember', 'Elm']
//['Angular', 'React', 'Vue', 'Ember', 'Elm']
//['Angular', 'React', 'Vue', 'Ember', 'Elm']

Bucle tradicional con For

Sin depender de un array podemos recorrer un rango de números a nuestra elección.

for ([expresionInicial]; [condicion]; [expresionIncremento])
  sentencia

En este ejempo donde mostramos los números del 0 al 3.

// Bucle for tradicional
for (let i = 0; i <= 3; i += 1) {
    console.log(i);
}
//0
//1
//2
//3

Ya vimos una forma más sencilla usando , la recordamos para comparar.

for (const num of _.range(4)) {
    console.log(num)
}
//0
//1
//2
//3

Las posibilidades de for son amplias.

// Decrecer del 10 al 0
for (let i = 10; i > 0; i -= 1) {
    console.log(i);
}
// Intervalo de 5 entre el 0 a 100
for (let i = 0; i <= 100; i += 5) {
    console.log(i);
}

Sus equivalentes en lodash.

// Decrecer del 10 al 0
for (const num of _.range(10, -1)) {
    console.log(num)
}

// Intervalo de 5 entre el 0 a 100
for (const num of _.range(0, 101, 5)) {
    console.log(num)
}

Bucle tradicional con While

Este bucle es potente a la par que peligroso. Solo admite un condicional, por lo que si nuestro software no llega a cambiar esa variable tendremos un bucle infinito.

let play = true;

while (play) {
    console.log('me ejecuto hasta que alguien me cambie play a false');
}

Un sencillo ejemplo que recorre los números del 30 al 50.

let num = 30;
while (num <= 50) {
    num += 1;
    console.log(num);
}

Conclusiones

Puedes resolver casi cualquier necesidad usando for-of en combinación de lodash. No obstante otros tipos de bucles existen porque siguen siendo prácticos. Explorarlos y aplicarlos adecuadamente ya depende de tu calidad como Front-End.

Si te ha gustado debes pagar un precio: un comentario ;)

Versión escritorio