Domina los bucles while y do...while en JavaScript con ejemplos claros. Aprende a evitar bucles infinitos, a definir una condición de salida y a usar un contador de forma segura. Además, adopta una mentalidad de depuración: los errores y su trace pueden ser tus mejores aliados cuando entiendes lo que indican.
¿Qué es while y cuándo usarlo en JavaScript?
El bucle while ejecuta su bloque mientras la condición sea verdadera. Es útil cuando no conoces cuántas iteraciones habrá. La clave es garantizar una salida: si la variable que evalúas no cambia, el ciclo no termina.
Úsalo cuando el número de repeticiones es incierto.
Controla el estado con una variable como contador.
Asegura un incremento o cambio en cada vuelta.
Evita el bucle infinito que desborda el programa.
Ejemplo problemático: falta el incremento dentro del ciclo, lo que provocaría un bucle infinito.
let contador =0;while(contador <3){console.log(contador);// Riesgo: nunca cambia 'contador'.}
Solución segura: incrementa el contador en cada iteración para cumplir la condición de salida.
let contador =0;while(contador <3){console.log(contador);// Imprime 0, 1, 2. contador++;// Condición de salida garantizada.}
¿Cómo evitar el bucle infinito con un contador?
Inicializa el contador correctamente.
Cambia el estado en cada ciclo con contador++ u otra operación.
Define una condición clara: por ejemplo, contador < 3.
Verifica el flujo con console.log para entender el orden de ejecución.
¿Cómo funciona do...while y qué lo hace distinto?
El do...while ejecuta el bloque al menos una vez antes de verificar la condición. Esto es útil cuando necesitas correr una acción inicial y luego decidir si continúas. Puedes usar template literals para mostrar el estado de la variable mientras iteras.
Ejecuta primero, valida después.
Requiere también un incremento para evitar bucles infinitos.
Ideal cuando quieres asegurar una primera ejecución.
Ejemplo con impresión inicial y condición número < 3:
let numero =0;do{console.log(`Entra en ${numero}`);// Primera ejecución garantizada. numero++;// Cambio de estado.}while(numero <3);
¿Por qué ejecuta al menos una vez?
El bloque do { ... } corre antes de evaluar while (condición).
Si la condición resulta falsa tras la primera vuelta, el ciclo se detiene.
Esto explica por qué ves primero mensajes como “Entra en 0” y luego cesa la iteración al no cumplirse la condición.
¿Qué buenas prácticas te evitan errores y mejoran tu lógica?
Adopta una disciplina que combine claridad en la condición, control del estado y calma ante los errores. Los errores son “amigos” que señalan la línea y la acción que fallan, guiando tu depuración con el trace.
Define siempre una condición de salida verificable.
Cambia el estado: incrementa o actualiza variables en cada vuelta.
Usa for cuando conoces cuántas iteraciones habrá y while cuando no.
Considera for...of y for...in para colecciones según su naturaleza.
Iterar con arreglos y objetos será común: se iteran, se trabajan y a veces se transforman.
Evita transformar estructuras complejas dentro de un for o while si no es apropiado para tu caso.
Mantén la calma ante errores y revisa el trace para entender el flujo.
¿Tienes dudas o quieres compartir cómo resolviste los retos? Deja tu comentario y muestra tu enfoque.
Algo que el profesor no menciona es que el do while casi no se usa en aplicaciones modernas. Normalmente se emplea cuando necesitas que una acción se ejecute al menos una vez sin importar la condición inicial. Un ejemplo típico sería un menú en un juego o en una aplicación que siempre aparece al entrar. Aun así, en muchos casos ese comportamiento puede lograrse mejor con eventos de clic o funciones más específicas.
Donde el do while realmente cobra sentido es cuando aprendes lenguajes como Java o C++, especialmente en programas de consola o lógica secuencial.
Si no te queda claro, aquí va una analogía:
Un do while es como tu mamá que te obliga a hacer la tarea y no te deja ir hasta que la termines. En cambio, los eventos son como tu papá: no te obliga directamente, pero está pendiente de cuando decidas hacerla.
En conclusión:
El do while es reactivo y bloqueante: ejecuta y repite hasta que se cumpla la condición.
Los eventos no bloquean: solo esperan a que ocurra una acción para responder.
// ============================================// Reto: while en JavaScript - Evita bucles infinitos// ============================================// Practica bucles while y do...while con condición de salida clara.// Inicializa el contador, cámbialo en cada iteración (ej: contador++) y define// una condición verificable para evitar bucles infinitos.// Ejecuta los tests con: npx vitest src/12-while-do-while// ============================================// --- Reto 1: while con contador e incremento seguro ---// Recibe "n" (número). Usa un bucle while con un contador que empieza en 0.// Mientras contador < n, agrega el valor actual del contador a un array y luego// incrementa el contador (condición de salida). Retorna el array.// Ejemplo: n = 3 → [0, 1, 2].functionnumerosConWhile(n){// Tu código aquílet contador =0;const miArray =[];while(contador < n){ miArray.push(contador); contador ++;}return miArray;}// --- Reto 2: while con condición de salida garantizada ---// Recibe "limite" (número). Usa while: contador empieza en 0 y se incrementa// dentro del bucle mientras contador < limite. Retorna el valor del contador al terminar.// Asegúrate de modificar el contador en cada vuelta para que el ciclo termine.functioncontarHastaLimite(limite){// Tu código aquílet contador =0;while(contador < limite){ contador ++;}return contador;}// --- Reto 3: do...while (ejecuta al menos una vez) ---// Recibe "limite" (número). Usa do...while: contador empieza en 0, dentro del do// incrementas el contador y en el while repites mientras contador < limite.// Así el bloque se ejecuta al menos una vez antes de evaluar la condición.// Retorna el contador al terminar. Si limite es 0, igual se ejecuta una vez → retorna 1.functiondoWhileAlMenosUnaVez(limite){// Tu código aquílet contador =0;do{ contador++;}while(contador < limite);return contador;}// --- Reto 4: do...while con template literals ---// Recibe "limite" (número). Usa do...while con un contador que empieza en 0.// En cada iteración agrega al array el string `Entra en ${contador}` (template literal)// y luego incrementa el contador. Repite mientras contador < limite.// Retorna el array de mensajes. Ejemplo: limite 3 → ["Entra en 0", "Entra en 1", "Entra en 2"].functionmensajesEntradaDoWhile(limite){// Tu código aquílet contador =0;const arregloDeMensajes =[];do{ arregloDeMensajes.push(`Entra en ${contador}`); contador ++;}while(contador < limite);return arregloDeMensajes;}module.exports={ numerosConWhile, contarHastaLimite, doWhileAlMenosUnaVez, mensajesEntradaDoWhile,};
Algo que no menciona el profesor es que do while casi no se usa, las veces que se puede usar do while es cuando quieres que algo se muestre una vez siempre, un ejemplo seria con un menu de un juego o de una app que siempre se te muestra al entrar y aun asi puede ser reemplazado por eventos de click o funciones mas especificas, pero el do while brilla cuando aprendes java o c++, por si no captas bien te lo explico con otras palabras, un do while es como tu mamà que te obliga a hacer tu tarea y no te deja ir hasta que la cumples, y los eventos son como tu padre que no te obliga a hacer la tarea pero siempre esta pendiente que la hagas, en conclucion mamà el do while es reactivo y bloqueante papà los eventos no solo observa esperando pero no bloquea
