JavaScript while y do ... while Loop (con ejemplos)

En este tutorial, aprenderá sobre el ciclo while y el ciclo do … while con la ayuda de ejemplos.

En programación, los bucles se utilizan para repetir un bloque de código. Por ejemplo, si desea mostrar un mensaje 100 veces, puede usar un bucle. Es solo un ejemplo simple; puedes lograr mucho más con los bucles.

En el tutorial anterior, aprendió sobre JavaScript for loop. Aquí, aprenderá sobre whiley do… whilebucles.

JavaScript while Loop

La sintaxis del whilebucle es:

 while (condition) ( // body of loop )

Aquí,

  1. Un whileciclo evalúa la condición dentro del paréntesis ().
  2. Si la condición se evalúa true, whilese ejecuta el código dentro del ciclo.
  3. La condición se evalúa nuevamente.
  4. Este proceso continúa hasta que la condición es false.
  5. Cuando la condición se evalúa false, el ciclo se detiene.

Para obtener más información sobre las condiciones , visite Operadores lógicos y comparación de JavaScript.

Diagrama de flujo de while Loop

Diagrama de flujo de JavaScript while loop

Ejemplo 1: Mostrar números del 1 al 5

 // program to display numbers from 1 to 5 // initialize the variable let i = 1, n = 5; // while loop from i = 1 to 5 while (i <= n) ( console.log(i); i += 1; )

Salida

 1 2 3 4 5

Así es como funciona este programa.

Iteración Variable Condición: i <= n Acción
Primero i = 1
n = 5		 true Se imprime 1. i aumenta a 2 .
2do i = 2
n = 5		 true Se imprime 2. i aumenta a 3 .
Tercero i = 3
n = 5		 true Se imprime 3. i aumenta a 4 .
Cuarto i = 4
n = 5		 true Se imprime 4. i aumenta a 5 .
Quinto i = 5
n = 5		 true Se imprime 5. i aumenta a 6 .
Sexto i = 6
n = 5		 false El bucle se termina

Ejemplo 2: Suma de números positivos únicamente

 // program to find the sum of positive numbers // if the user enters a negative numbers, the loop ends // the negative number entered is not added to sum let sum = 0; // take input from the user let number = parseInt(prompt('Enter a number: ')); while(number>= 0) ( // add all positive numbers sum += number; // take input again if the number is positive number = parseInt(prompt('Enter a number: ')); ) // display the sum console.log(`The sum is $(sum).`);

Salida

 Ingrese un número: 2 Ingrese un número: 5 Ingrese un número: 7 Ingrese un número: 0 Ingrese un número: -3 La suma es 14.

En el programa anterior, se solicita al usuario que ingrese un número.

Aquí, parseInt()se usa porque prompt()toma la entrada del usuario como una cadena. Y cuando se agregan cadenas numéricas, se comporta como una cadena. Por ejemplo '2' + '3' = '23',. Entonces parseInt()convierte una cadena numérica en un número.

El whileciclo continúa hasta que el usuario ingresa un número negativo. Durante cada iteración, el número ingresado por el usuario se agrega a la sumvariable.

Cuando el usuario ingresa un número negativo, el ciclo termina. Finalmente, se muestra la suma total.

JavaScript hacer … while Loop

La sintaxis de do… whileloop es:

 do ( // body of loop ) while(condition)

Aquí,

  1. El cuerpo del bucle se ejecuta al principio. Luego se evalúa la condición .
  2. Si la condición se evalúa true, el cuerpo del bucle dentro de la dodeclaración se ejecuta nuevamente.
  3. La condición se evalúa una vez más.
  4. Si la condición se evalúa true, el cuerpo del bucle dentro de la dodeclaración se ejecuta nuevamente.
  5. Este proceso continúa hasta que la condición se evalúa a false. Entonces el bucle se detiene.

Nota : el do… whilebucle es similar al whilebucle. La única diferencia es que en el do… whileciclo, el cuerpo del ciclo se ejecuta al menos una vez.

Diagrama de flujo de do… while Loop

Diagrama de flujo de JavaScript do… while loop

Veamos el funcionamiento de do… whileloop.

Ejemplo 3: Mostrar números del 1 al 5

 // program to display numbers let i = 1; const n = 5; // do… while loop from 1 to 5 do ( console.log(i); i++; ) while(i <= n);

Salida

 1 2 3 4 5

Así es como funciona este programa.

Iteración Variable Condición: i <= n Acción
i = 1
n = 5		 Sin revisar Se imprime 1. i aumenta a 2 .
Primero i = 2
n = 5		 true Se imprime 2. i aumenta a 3 .
2do i = 3
n = 5		 true Se imprime 3. i aumenta a 4 .
Tercero i = 4
n = 5		 true Se imprime 4. i aumenta a 5 .
Cuarto i = 5
n = 5		 true Se imprime 6. i aumenta a 6 .
Quinto i = 6
n = 5		 false El bucle se termina

Ejemplo 4: Suma de números positivos

 // to find the sum of positive numbers // if the user enters negative number, the loop terminates // negative number is not added to sum let sum = 0; let number = 0; do ( sum += number; number = parseInt(prompt('Enter a number: ')); ) while(number>= 0) console.log(`The sum is $(sum).`);

Salida 1

 Ingrese un número: 2 Ingrese un número: 4 Ingrese un número: -500 La suma es 6.

Here, the do… while loop continues until the user enters a negative number. When the number is negative, the loop terminates; the negative number is not added to the sum variable.

Output 2

 Enter a number: -80 The sum is 0.

The body of the do… while loop runs only once if the user enters a negative number.

Infinite while Loop

If the condition of a loop is always true, the loop runs for infinite times (until the memory is full). For example,

 // infinite while loop while(true)( // body of loop )

Here is an example of an infinite do… while loop.

 // infinite do… while loop const count = 1; do ( // body of loop ) while(count == 1)

In the above programs, the condition is always true. Hence, the loop body will run for infinite times.

for Vs while Loop

A for loop is usually used when the number of iterations is known. For example,

 // this loop is iterated 5 times for (let i = 1; i <=5; ++i) ( // body of loop )

Los ciclos Y whiley do… whilese utilizan normalmente cuando se desconoce el número de iteraciones. Por ejemplo,

 while (condition) ( // body of loop )

Articulos interesantes...