Bucle while
En for, inicio, condición y actualización van en una sola cabecera. A veces solo sabes la regla «sigue mientras esto sea cierto» — y el contador cambia dentro del propio trabajo. while mira una condición primero, ejecuta el cuerpo y vuelve a comprobar. Misma idea de repetir; otra forma en la página.
¿Qué hace while?
Mientras la expresión entre paréntesis sea verdadera, el bloque { } se vuelve a ejecutar. En la cabecera no hay hueco aparte para inicio o actualización. Preparas variables antes del bucle y las cambias dentro del cuerpo hasta que la condición sea falsa. Entonces el bucle termina y sigue la siguiente sentencia.
while, for y do...while de un vistazo
📊 Formas cotidianas de bucle
| Forma | Cuándo encaja | Comprobación |
|---|---|---|
while |
seguir mientras valga una regla; actualización en el cuerpo | antes de cada vuelta |
for |
ya conoces inicio, tope y paso | antes de cada vuelta (cabecera de tres partes) |
do...while |
el cuerpo debe correr al menos una vez | después de cada vuelta |
Los while de principiante suelen seguir usando un contador pequeño. La diferencia es el sitio: escribes let i = 0 antes del bucle e i++ (u otro cambio) entre llaves. Si nunca cambias lo que lee la condición, el bucle puede no terminar nunca.
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
Contar con while
i empieza en 0 antes del bucle. Cada vuelta imprime i y suma uno. Ves 0…4 — cinco vueltas. El 5 no se imprime porque la condición falla primero. Sin i++ en el cuerpo, i se quedaría en 0 para siempre.
Lee una vuelta despacio: condición → cuerpo (con la actualización) → otra vez condición. Por eso olvidar la actualización es la trampa clásica del bucle infinito con while.
let n = 1;
while (n <= 3) {
console.log("step " + n);
n++;
}
Empezar en 1 con etiquetas claras
Aquí el contador arranca en 1 y la condición usa n <= 3; ves step 1, step 2, step 3. Empezar en 0 o 1 es diseño — mantén la condición alineada, igual que con for.
let total = 0;
let k = 1;
while (k <= 4) {
total = total + k;
k++;
}
console.log(total);
Acumular un total
total empieza en 0. Cada vuelta suma el k actual y luego avanza k. Tras 1+2+3+4, total es 10. El resultado que crece vive fuera; el contador que mueve la condición, al lado.
let left = 3;
while (left > 0) {
console.log("left=" + left);
left--;
}
console.log("done");
Contar hacia atrás hasta parar
No todo bucle solo sube. Este imprime left=3, left=2, left=1 y luego done. Bajar el contador también es una actualización honesta — cualquier cambio que acerque el final vale.
let x = 0;
do {
console.log("tick " + x);
x++;
} while (x < 1);
console.log("after=" + x);
do...while ejecuta el cuerpo primero
do...while corre el cuerpo una vez y luego comprueba. Aunque la condición ya fuera falsa para un while normal, la primera vuelta ocurre. Aquí ves tick 0 y después after=1. Úsalo cuando la historia sea «probar una vez y quizá repetir».
Mostrar el resultado de while en la página
Haz un conteo corto con while, construye un mensaje y escríbelo en la página.
<!DOCTYPE html>
<html>
<head>
<title>While — page count</title>
</head>
<body>
<p id="out">…</p>
<script>
let msg = "";
let i = 1;
while (i <= 4) {
msg = msg + i + " ";
i++;
}
let box = document.getElementById("out");
box.textContent = "count=" + msg.trim();
</script>
</body>
</html>
La página muestra count=1 2 3 4. Cambia el tope, recarga y lee la lista nueva. Prefiere for cuando el plan de tres partes es obvio; prefiere while cuando la regla de parada es una sola condición con actualización en el cuerpo. Lo siguiente: recorrer valores y claves con for...of y for...in.
Pruébalo tú
- Escribe un
whileque registre0…4coni < 5ei++en el cuerpo. - Cámbialo para registrar
1…5coni <= 5. - Suma
1…5entotalconwhiley registra el resultado. - Cuenta atrás de
5a1y luego registradone. - Escribe un
do...whileque imprima una línea aunque la condición empiece falsa. - En la demo HTML cambia solo el tope, recarga y lee
count=.
Errores frecuentes
- Olvidar la actualización del cuerpo y que la condición nunca sea falsa (bucle infinito)
- Error de uno:
i < 5frente ai <= 5cuando querías el otro conteo - Elegir
do...whilecuando de verdad quieres permitir cero vueltas - Poner la actualización en el sitio equivocado o cambiar otra variable
- Un
whilelargo cuando una cabeceraforclara se leería mejor
Resumen
whilerepite un bloque mientras la condición sea verdadera- Prepara variables antes; actualízalas en el cuerpo
- Ideal para contar, sumar y contar atrás
do...whileejecuta el cuerpo al menos una vez y luego comprueba- Prefiere
forcon inicio/tope/paso claros;whilepara una regla continua - Siguiente: for...of y for...in — recorrer valores y claves
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior