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.

Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios