10 - Bucle while

Estructura inicial

En nuestra carpeta de proyecto crearemos la siguiente estructura:

/
├── js/
│   └── 10-while.js
└── index.html

Y un código sencillo para nuestro HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/10-while.js"></script>
    <title>10 - Bucle while</title>
</head>
<body>
    <h1>Temario de JavaScript</h1>
</body>
</html>

Estructura de while

Podemos encontrar dos tipos de bucles while:

while(condición) {
    //Código a ejecutar en bucle mientras se cumpla la condición.
}

do {
    //Código a ejecutar
} while(condición)

La principal diferencia es que el primero omitirá el código de cumplirse la condición, a diferencia del segundo que como mínimo ejecutará el código una vez aunque se cumpla la condición.

Ejemplos de while

/* 
    Mientras siga siendo menor de edad, mostrará un mensaje que lo indique y le sumará un año 
    (Normalmente no usaríamos while para algo como esto)
*/
let edad = 15

while(edad < 18) {
    console.log("Sigues siendo menor de edad")
    edad++
}

/* 
    Mientras que el mínimo sea mayor o igual al máximo, 
    seguirá pidiendo que el usuario introduzca de nuevo los valores 
*/
do {
    let min = prompt("Número mínimo")
    let max = prompt("Número máximo")
} while(min >= max)