Javascript, parte 4: Ciclos de repetición

Se utilizan para indicarle a nuestro programa que una instrucción que se va a repetir tantas veces como sea necesario.

While

Al igual que un if, evalúa una condición, sólo que en este caso el bloque de código verdadero se ejecutará hasta que la condición se deje de cumplir.

Supongamos que le pedimos al usuario que ingrese un número menor a 10:

let numero = prompt('Ingrese un número menor a diez.');
numero = parseInt(numero, 10);

Y luego mostramos la cantidad de números que hay hasta llegar justamente al diez:

while(numero < 10){
    console.log(numero);
    numero++;
}

El while verifica una condición, en este caso, que el número que haya ingresado el usuario sea menor a diez. Si esto es así, se ejecutará un bloque que mostrará el número ingresado y lo sumará de a uno.

Vale aclarar que:

numero++;

Sumará un valor numérico en una unidad. Una alternativa a esto es:

numero = numero + 1;

Ahora, a diferencia de un if, el intérprete volverá de nuevo a preguntar por la condición, si ésta sigue cumpliéndose, entonces volverá a ejecutar el código de forma indefinida, hasta que ya no se cumpla.

Ejemplo: Si ingresarámos por teclado el número 7:

  • 7 es menor a 10. Mostramos por pantalla el número 7 y sumamos el número en una unidad, ahora el número es 8.
  • 8 es menor a 10. Mostramos por pantalla el número 8 y sumamos el número en una unidad, ahora el número es 9.
  • 9 es mayor a 10. Mostramos por pantalla el número 9 y sumamos el número en una unidad, ahora el número es 10.
  • 10 NO es mayor a 10. En este último caso la condición ya no se cumple y el bloque de código no se ejecuta. Finaliza el while.

Do while

Esta instrucción es similar al while, con la diferencia de que ejecuta un bloque de código sí o sí, y luego verifica si una condición se cumple, en caso de que así sea, se volverá a ejecutar ese bloque de código, esto hasta que la condición ya no se cumpla.

Supongamos en este caso que tenemos dos variables:

let numero;
let total = 0;

A continuación, vamos a pedirle al usuario que ingrese un número por teclado y vamos a guardarlo en la variable numero y a sumar a la variable total el valor de ese número.

Luego vamos a verificar si el número ingresado por el usuario no es 0 (cero) si la condición se cumple, entonces vamos a pedirle al usuario que ingrese otro número y repetir el mismo proceso.

Una vez que la condición se deje de cumplir, y finalice el do while, vamos a mostrar por pantalla el total de la suma:


//Variable que guardará un número que ingrese el usuario por teclado.
let numero;
//Variable que sumará todos los números que haya ingresado el usuario.
let total = 0;
do{
    numero = prompt('Ingrese un valor numérico menor o mayor a cero. De lo contrario ingrese cero para finalizar el ciclo.');
    numero = parseFloat(numero);
    total += numero;
}while(numero != 0);

console.log('El resultado es: ' + total);

Ejemplo:

  • Ingresamos por teclado 10, que se guarda en la variable número, sumamos a la variable total ese valor, total ahora vale 10. La condición se cumple (10 no es 0) y se vuelve ejecutar el bloque de código.
  • Ingresamos por teclado 20, que se guarda en la variable número, sumamos a la variable total ese valor, total ahora vale 30. La condición se cumple (20 no es 0) y se vuelve ejecutar el bloque de código.
  • Ingresamos por teclado 70, que se guarda en la variable número, sumamos a la variable total ese valor, total ahora vale 100. La condición se cumple (70 no es 0) y se vuelve ejecutar el bloque de código.
  • Ingresamos por teclado 0, que se guarda en la variable número, sumamos a la variable total ese valor, total ahora vale 100. La condición ya no se cumple. Finaliza el ciclo.

For

El ciclo de repetición for está compuesto por tres partes:

  • La definición de un contador que iniciará con cualquier número.
  • Una condición que evaluará si el bloque de código se ejecuta o no.
  • La modificación del contador.

Ejemplo:

for(let i = 0; i < 10; i++){
    console.log(i);
}

En este último caso definimos una variable con un valor inicial en 0 (cero) La condición entonces es que ese valor sea menor a 10. Y por último qué vamos a hacer en cada vuelta, es decir incrementar el valor en una unidad.

  • La variable i vale 0. 0 es menor a 10. Mostramos i por pantalla. Incrementamos la variable, que ahora vale 1.
  • La variable i vale 1. 1 es menor a 10. Mostramos i por pantalla. Incrementamos la variable, que ahora vale 2.
  • etc etc etc, hasta llegar a 9.
  • La variable vale 9. 9 es menor a 10. Mostramos i por pantalla. Incrementamos la variable, que ahora vale 10.
  • Finalmente la variable vale 10, pero 10 NO es menor a 10. El ciclo finaliza.

En este último caso el resultado será:

0
1
2
3
4
5
6
7
8
9

Imaginemos que necesitáramos realizar algo similar, pero en este caso le pidiéramos al usuario que ingrese un valor numérico para calcular la tabla de ese número:

let numero = prompt('Ingrese un valor numérico para calcular su tabla.');
numero = parseInt(numero, 10);

for(let i = 0; i < 10; i++){
    let resultado = numero * i;
    console.log(numero + " * " + i + " = " + resultado);
}

Si ingresáramos por teclado el número 5, el resultado sería:

5 * 0 = 0
5 * 1 = 5
5 * 2 = 10
5 * 3 = 15
5 * 4 = 20
5 * 5 = 25
5 * 6 = 30
5 * 7 = 35
5 * 8 = 40
5 * 9 = 45

También podríamos cambiar la condición, de modo que multiplicara a partir del número 1, y si incluyera el 10 (cambiar menor a 10 por menor o igual a 10):

let numero = prompt('Ingrese un valor numérico para calcular su tabla');
numero = parseInt(numero, 10);

for(let i = 1; i <= 10; i++){
    let resultado = numero * i;
    console.log(numero + " * " + i + " = " + resultado);
}

En este último caso, si ingresáramos por teclado 5, el resultado sería:

5 * 1 = 5
5 * 2 = 10
5 * 3 = 15
5 * 4 = 20
5 * 5 = 25
5 * 6 = 30
5 * 7 = 35
5 * 8 = 40
5 * 9 = 45
5 * 10 = 50

También podríamos hacer el mismo proceso, pero calculando la tabla del número mayor al menor:

let numero = prompt('Ingrese un valor numérico para calcular su tabla');
numero = parseInt(numero, 10);

for(let i = 10; i >= 1; i--){
    let resultado = numero * i;
    console.log(numero + " * " + i + " = " + resultado);
}

En este último caso si el valor ingresado por teclado fuese 5 el resultado sería:

5 * 10 = 50
5 * 9 = 45
5 * 8 = 40
5 * 7 = 35
5 * 6 = 30
5 * 5 = 25
5 * 4 = 20
5 * 3 = 15
5 * 2 = 10
5 * 1 = 5