Bucles en JavaScript
Aprende los bucles de JavaScript: for, while, do...while, for...in y for...of, más break y continue. Sintaxis clara, ejemplos ejecutables y errores comunes.
Introducción a los bucles en JavaScript
Los bucles en JavaScript son un concepto fundamental en la programación que permiten ejecutar bloques de código múltiples veces. Esta guía proporciona una comprensión profunda de los diferentes tipos de bucles en JavaScript, incluida su sintaxis y aplicaciones prácticas.
¿Qué son los bucles en JavaScript?
Un bucle ejecuta el mismo bloque de código una y otra vez mientras una condición se mantenga verdadera. Cada paso por el cuerpo se llama una iteración. Los bucles te permiten procesar cada elemento de una lista, repetir una acción un número fijo de veces, o continuar hasta que cambie algún estado, todo sin copiar y pegar código.
¿Por qué usar bucles?
Sin bucles tendrías que escribir la misma instrucción una vez por cada repetición:
console.log(1);
console.log(2);
console.log(3);
// ...and so on for every numberUn bucle reduce eso a unas pocas líneas que funcionan para 3 números o 3 millones. El resultado es código más corto, más fácil de modificar y mucho menos propenso a errores.
Comprensión de los diferentes tipos de bucles
Veamos los distintos bucles disponibles en JavaScript, su sintaxis y cómo usarlos de manera efectiva.
El bucle while
El bucle while es el tipo de bucle más sencillo en JavaScript. Comprueba la condición antes de cada iteración y sigue ejecutándose mientras esa condición sea verdadera. Úsalo cuando no sabes de antemano cuántas veces necesitas repetir, por ejemplo, leer hasta encontrar un marcador de fin.
Sintaxis:
while (condition) {
// code to be executed
}Ejemplo:
El cuerpo debe eventualmente hacer que la condición sea falsa. Si nunca lo hace, se crea un bucle infinito que congela la página. El i++ de arriba es lo que garantiza que el bucle termine: olvidarlo hace que i < 5 sea verdadero para siempre.
El bucle do...while
El bucle do...while comprueba su condición después de cada iteración, por lo que el cuerpo siempre se ejecuta al menos una vez, incluso si la condición es falsa desde el inicio. Esto es útil para avisos o menús que deben mostrarse al menos una vez antes de decidir si repetir.
Sintaxis:
do {
// code to be executed
} while (condition);Ejemplo:
El bucle for
El bucle for es el más utilizado. Agrupa tres partes en una sola línea: una inicialización (se ejecuta una vez al inicio), una condición (se comprueba antes de cada iteración) y una expresión final (se ejecuta después de cada iteración, generalmente para incrementar un contador). Es la opción natural cuando sabes cuántas veces quieres repetir.
Sintaxis:
for (initialization; condition; finalExpression) {
// code to be executed
}Ejemplo:
El bucle for...in
Este bucle itera sobre los nombres de propiedad (claves) enumerables de un object. Úsalo cuando necesites las claves de un object. Evítalo con arrays: produce índices de tipo string ("0", "1", …), no garantiza el orden y también recorre propiedades heredadas; usa for...of o métodos de array en su lugar.
Sintaxis:
for (variable in object) {
// code to be executed
}Ejemplo:
El bucle for...of
El bucle for...of itera sobre los valores de objetos iterables como arrays, strings, Map y Set. Es la forma más limpia de recorrer los elementos de un array cuando no necesitas el índice. Recuerda la diferencia: for...in te da claves, for...of te da valores.
Sintaxis:
for (variable of iterable) {
// code to be executed
}Ejemplo:
Elegir el bucle correcto
| Bucle | Mejor para | Te proporciona |
|---|---|---|
for | Un número conocido de repeticiones, o cuando necesitas el índice | Un contador que controlas |
while | Repetir hasta que cambie una condición, número de veces desconocido | Nada — gestionas el estado tú mismo |
do...while | Igual que while, pero debe ejecutarse al menos una vez | Nada — ejecuta el cuerpo primero |
for...in | Iterar sobre las claves de un object | Nombres de propiedad (strings) |
for...of | Iterar sobre los valores de un array, string, Map o Set | Cada valor |
Para la mayoría del trabajo con arrays también encontrarás métodos como forEach, map y filter (consulta métodos de array); a menudo se leen con más claridad que un bucle manual.
Bucles anidados
Un bucle puede contener otro bucle. El bucle interno se ejecuta completamente en cada pasada del bucle externo, lo que es útil para cuadrículas, tablas y pares.
Control de la ejecución de bucles
Uso de break en bucles
La instrucción break puede usarse para salir de un bucle antes de que la condición sea falsa.
Ejemplo:
Uso de continue en bucles
La instrucción continue omite la iteración actual y continúa con la siguiente.
Ejemplo:
Salir de bucles anidados
Por defecto, break solo sale del bucle más interno. Para salir de un bucle externo desde dentro de uno interno, asigna una etiqueta al bucle externo y usa break con ella.
Conclusión
Comprender y usar eficazmente los diferentes tipos de bucles en JavaScript mejora tu capacidad para escribir código conciso y eficiente. Elige for cuando conozcas el número de repeticiones, while/do...while cuando no lo conozcas, for...of para valores y for...in para claves de object, y ten cuidado con los bucles infinitos.
Continúa con temas relacionados: operadores condicionales, arrays, métodos de array y funciones.