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 iterando Array’s como aprendimos en la lección de Arrays. Una función muy plástica es generar rangos por medio de Array.from.

const rango = Array.from({length: 4}, (v, i) => i);

for (const num of rango) {
    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);
}

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

En otros lenguajes (Python, Clojure, PHP…) disponemos de una función de rango especialmente preparada para crear secuencias. Lamentablemente en JavaScript no disponemos, pero aún así se pueden construir de diferentes maneras.

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 usando Array.from() como hemos visto.

for (const num of Array.from({length: 4}, (v, i) => i)) {
    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

Dispongo de una función que es equiparable a usar range() en Python o cualquier otro lenguaje similar. Una solución completa, optima y flexible para crear secuencias.

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 frontend.

<p>1 elefante se balanceaba Sobre la tela de una araña Como veía que no se caía Fue a buscar otro elefante</p>
<p>2 elefante se balanceaba Sobre la tela de una araña Como veía que no se caía Fue a buscar otro elefante</p>
<p>3 elefante se balanceaba Sobre la tela de una araña Como veía que no se caía Fue a buscar otro elefante</p>

       ⭐
       🟢
     🟢🟢🟢
    🟢🟢🟢🟢🟢
  🟢🟢🟢🟢🟢🟢🟢
🟢🟢🟢🟢🟢🟢🟢🟢🟢
     🟫🟫🟫
     🟫🟫🟫

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

• 1 café: Se mantiene el dominio durante 4 meses.
• 2 cafés: Se liquida 1 mes del Servidor Web.
• 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Acepto la política de Protección de Datos.

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario