En el capítulo anterior habíamos visto las estructuras de control que nos iban a ayudar a resolver o a trabajar con condiciones. Ahora vamos a ver las otras estructuras de control que nos van a ayudar a controlar el flujo de nuestra programación, y son los loops, bucles o estructuras repetitivas. En los bucles entra en juego el incremento o decremento de alguna variable que hace cambiar el valor y va a hacer que se repitan las líneas de código hasta que la variable en cuestión que estamos evaluando llegue al valor deseado y entonces se sale del ciclo.
En este capítulo veremos las estructuras while, do while, for, y nuevas opciones para el for que vinieron en ES6, como son el for in y el for of.
En este capítulo veremos las siguientes estructuras:
Las primeras estructuras que vamos a ver son while y do while, que están cayendo en desuso ya que se trata de estructuras imperativas de programación estructurada, y Javascript cada vez está siendo más un lenguaje declarativo y al ser multiparadigma, sobre todo cuando estamos trabajando con programación orientada a objetos y programación funcional, generalmente nos gusta escribir un código más declarativo que imperativo, por lo que es importante conocer las estructuras while y do while, pero en la práctica cada vez se utilizan menos.
1. Estructura while
Veamos la sintaxis de la estructura while.
Ejm
let contador = 0; while (contador < 10) { console.log(contador); contador++; }
2. Estructura do while
Es una variante de while que aún se ve menos que la primera. La estructura es muy parecida a while.
do { } while (condition);
Veamos un ejm.
Ejm
let contador2 = 0; do { console.log("do while " + contador2); contador2++; } while (contador2 < 10);
La diferencia entre el bucle while y el do while, es que en la segunda se ejecuta una vez el bloque de código que pasamos, independientemente de que se cumpla o no la condición, y después lee la condición, y en el bucle while no ocurre ésto, primero se lee la condición, y si se cumple, se ejecuta el código. En el bucle do while, la evaluación del código está al final.
3. Bucle for
En Javascript, el ciclo o bucle más utilizado es el bucle for, la cual consta de 3 partes:
for (Inicialización de la variable; Condición; Incremento o decremento) { Sentencias que ejecuta el bucle for }
Veamos un ejm.
Ejm
for (let i = 0; i < 10; i++) { console.log(i) ; }
Veamos otro ejm para ir familiarizándonos con el bucle for.
Ejm
let numero = [10,20,30,40,50,60,70,80,90,100]; for (let i = 0; i < numero.length; i++) { console.log(numero[i]); }
4. Bucles for in y for of
Desde ES6 han surgido variantes de for como son for in y for of.
4.1 Bucle for in
Es un loop que permite recorrer o iterar las propiedades de un objeto. Es un for especial para objetos. Lo que nos pide es una variable que va a representar la propiedad que queremos imprimir, la cual está dentro de un objeto. Veamos un ejm.
Ejm
// Bucle for in // Especial para objetos const fran = { nombre: "Francisco", apellido: "Paredes", edad: 51 } for (const propiedad in fran) { console.log(propiedad); }
En el siguiente ejm, además de la propiedad vamos a mostrar el valor de dicha propiedad.
Ejm
// Bucle for in // Especial para objetos const fran = { nombre: "Francisco", apellido: "Paredes", edad: 51 } for (const propiedad in fran) { console.log("Key: " + propiedad + " / Valor: " + fran[propiedad]) }
4.2 Bucle for of
Es muy parecido a for in, sólo que en vez de utilizar la palabra reservada in vamos a utilizar la palabra reservada of. Nos permite recorrer todos los elementos de cualquier objeto que sea iterable en Javascript, como arrays, strings…
Ejm
const numeros = [1,2,3,4,5,6,7,8,9,10,20]; for (const item of numeros) { console.log(item); }
Por lo tanto:
- for in es para objetos.
- for of es para elementos iterables (arrays, strings…).
Ejm con for of
let cadena = "Hola mundo"; for (const elemento of cadena) { console.log(elemento); }