Lección 8: 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 lenguajes de referencia como Python, entre otros.

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

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

Una forma más sencilla de realizar lo mismo es usando rangos, como el proporcionado por lodash.

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

Más adelante profundizaremos.

Las posibilidades de for son amplias si eres hábil a la hora de jugar con el incremento y su condicional.

// 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);
}

Rangos

Si quisieramos recorrer los números del 0 al 3 podríamos usar fill() junto a map() para generar un array que pueda ser iterado.

const miRango = Array(4).fill().map(function(valor, indice) {
    return indice;
});

console.log(miRango);
// [0, 1, 2, 3]

Y para terminar.

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

O la famosa herramienta lodash y su función range que hemos visto en un ejemplo anterior.

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

Apuntes finales

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

8-1 8-2 8-3 8-4

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
2 cafés: Respondo a una duda en los comentarios.
4 cafés: Te corrijo una actividad y te envío feedback.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario