El bucle while de JavaScript con ejemplos

En este capítulo vas a ver el bucle while, otro de los tipos de bucles de JavaScript.

Palabra del lenguaje nº 40 encontrada.
while es una estructura de control de flujo. En concreto un tipo de estructura para crear bucles con los que ejecutar un número x de veces un bloque de código.

Sintaxis del bucle while en JavaScript

Veamos su sintaxis en pseudocódigo:

 // Pseudocódigo.
inicializador
while (condición de salida) {
	código a ejecutar

	expresión final
}

El inicializador esta vez se encuentra fuera del propio bucle.

La condición de salida se especifica entre los paréntesis del while. Abrimos llaves y dentro se coloca todo el código a ejecutar por el bucle. Antes de cerrar las llaves hay que escribir la expresión final (también conocida como actualización o incremento/decremento).

Creando un bucle while

Escribamos un ejemplo sencillo con el bucle while. Vamos a realizar el mismo ejemplo que viste con el bucle for para que puedas hacer comparaciones a la vez que aprendes como se escribe y funciona.

let i = 1;

while (i <= 10) {
	document.write("El valor del bucle es: " + i + "<br>");
	i++;
}

El inicializador del bucle lo puedes ver en la variable i que he declarado con let más arriba (también lo puedes hacer con var).

Comienza el bucle while utilizando su palabra reservada, while. A continuación, especificamos la condición de salida entre unos paréntesis.

Finalmente, abrimos unas llaves en las que se escribe todo el código que quieras ejecutar en bucle en su interior. Antes del cierre de esta llave, tienes que incluir la expresión final. En este caso un incremento.

Este es un pequeño ejemplo de infinidad que podemos crear. Veremos muchos más ejemplos a lo largo del curso, lo importante ahora es que aprendas lo básico, ya habrá tiempo de ver ejemplos mucho más elaborados.

Diferencias entre el bucle while y el bucle for de JavaScript

Realmente no tienen ninguna diferencia en su esquema general, los dos tipos de bucle poseen los mismos tres parámetros. La gran diferencia es la forma de especificarlos.

El bucle for

for(i=1;i<=10;i++){
	document.write("El valor del bucle es: " + i + "<br>");
}

El bucle while

let i = 1;

while (i <= 10) {
	document.write("El valor del bucle es: " + i + "<br>");
	i++;
}

Aquí tienes el mismo ejemplo escrito en los dos tipos de bucles, para que compares. El bucle for cuenta con el inicializador, condición de salida y expresión final en el mismo sitio, entre los paréntesis. En cambio, el bucle while tiene una parte predeclaración (inicializador, la variable declarada), otra parte entre los paréntesis (condición de salida) y la otra dentro de las llaves con el código a ejecutar.

Ejercicios de JavaScript

58. Crea un bucle while que imprima "El número es: 'i'. Donde 'i' que sea el número de la vuelta (20,21,22...). Este bucle se ejecutará empezando por el número 20 hasta llegar al 70. Es decir, la primera vuelta debe imprimir El número es: 20 y la última El número es: 70.

La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.