003. Ciclos (loops)

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);
        }
Scroll al inicio