El bucle while - Curso de JavaScript de cero a máster - Capítulo 23


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:

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++;
}

Resultado en el navegador

El bucle while de JavaScript

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

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

Código JavaScript

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

El bucle while

Código JavaScript

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

  1. Crea un bucle while que imprima "El número es: "i"". Donde "i" que sea el número de la vuelta (1,2,3...). 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í: Haz click aquí.

Capítulos


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.