El bucle for de JavaScript y todos los demás, comparados en directo | We.Inc
for, for...of, for...in, while, do...while y forEach lado a lado. Ejecuta cada bucle sobre un array, un string, un objeto o un Map y mira la salida, o el error que lanza.
Un bucle for clásico tiene tres partes: for (let i = 0; i < arr.length; i++) { ... }. Úsalo cuando necesites el índice o un paso personalizado. Para valores simples usa for...of, para las claves de un objeto usa for...in u Object.entries, y usa while cuando no sabes de antemano cuántas vueltas necesitas.
Qué bucle encaja con cada tarea
Bucle
Ideal para
¿Se puede salir antes?
for (let i = 0; i < n; i++)
Contar, acceder por índice, recorrer hacia atrás o de 2 en 2
Sí
for (const x of iterable)
Valores de arrays, strings, Maps, Sets, NodeLists
Sí
for (const key in obj)
Claves de un objeto simple (incluye las heredadas)
Sí
while (condition)
Repetir hasta que algo cambie, número de vueltas desconocido
Sí
do { } while (condition)
Lo mismo, pero siempre se ejecuta al menos una vez
Sí
arr.forEach(fn)
Efectos secundarios sobre cada elemento del array
No (solo lanzando un error)
Todos los bucles de esta página repiten código, pero se diferencian en lo que te entregan en cada vuelta, en lo que pueden recorrer y en cómo sales de ellos. El ejecutor de abajo te permite aplicar cada bucle a cuatro tipos de datos y ver la salida real, lo que hace fácil detectar errores como for...in sobre un array o for...of sobre un objeto simple.
Elige un bucle y un tipo de dato. La página ejecuta ese bucle de verdad en tu navegador.
El panel de salida muestra qué contenía la variable del bucle en cada vuelta, o el error que lanza la combinación.
Activa la opción break para parar en la tercera vuelta y ver qué bucles lo admiten.
Copia cualquier patrón de los ejemplos de más abajo.
Declara el contador con let, no con var. Con let cada vuelta tiene su propia copia, así los callbacks creados dentro del bucle ven el número correcto.
Prefiere const en for...of y for...in cuando no reasignas la variable; cada vuelta recibe un enlace nuevo.
forEach no espera a los callbacks async. Para hacer await de cada elemento por turno, usa for...of con await dentro de una función async.
Asegúrate de que la condición de un bucle while pueda volverse falsa. Cambia dentro del cuerpo la variable que comprueba, o la pestaña se congelará.
Preguntas frecuentes
¿Qué diferencia hay entre for...of y for...in?
for...of te da los valores de cualquier iterable, como los elementos de un array o los caracteres de un string. for...in te da los nombres de las propiedades como strings, incluidas las enumerables heredadas. Sobre un array, for...in devuelve '0', '1', '2' en lugar de los elementos.
¿Cómo salgo de un bucle forEach?
No se puede, salvo lanzando un error. Cambia a for...of, que admite break, o a some, every, find o findIndex, que se detienen solos en cuanto tienen una respuesta.
¿Cómo recorro un objeto en JavaScript?
Usa for (const [key, value] of Object.entries(obj)). Solo cubre las claves propias del objeto y te da ambas partes. Usar for...of directamente sobre un objeto simple lanza TypeError: obj is not iterable.
¿Cómo salgo de dos bucles anidados a la vez?
Pon una etiqueta antes del bucle exterior y úsala con break: outer: for (...) { for (...) { if (found) break outer; } }. continue outer, en cambio, salta a la siguiente vuelta del bucle exterior.
¿Cómo recorro un array hacia atrás?
Empieza en el último índice y cuenta hacia abajo: for (let i = arr.length - 1; i >= 0; i--). También es la forma segura de quitar elementos con splice mientras recorres, porque las posiciones que aún no has visitado no se desplazan.
Las tres partes de un bucle for
La primera parte se ejecuta una vez antes de todo y normalmente crea el contador. La segunda se comprueba antes de cada vuelta, y el bucle termina en cuanto es falsa. La tercera se ejecuta después de cada vuelta, normalmente para avanzar el contador.
Cualquier parte puede quedar vacía. for (;;) es un bucle que solo termina con break o return, algo útil a veces para lógica de reintentos con una salida clara dentro.
break, continue y etiquetas
break sale de inmediato del bucle más interno. continue se salta el resto de la vuelta actual y pasa a la siguiente. Ambos funcionan en for, for...of, for...in, while y do...while, pero no en un callback de forEach, donde return solo termina esa llamada.
Una etiqueta es un nombre seguido de dos puntos delante de una sentencia. break etiqueta y continue etiqueta apuntan entonces a esa sentencia exterior, lo que te ahorra gestionar un indicador found entre bucles anidados.
Patrones de bucle para copiar
for clásico, hacia delante, hacia atrás y a saltos
Cambia el inicio, la condición o el paso para contar como quieras.
for...of con el índice
entries() empareja cada valor con su posición, así obtienes ambos sin contador.
while y do...while
do...while comprueba su condición después del cuerpo, así que el cuerpo se ejecuta una vez aunque la condición empiece siendo falsa.
Salir de bucles anidados con una etiqueta
break grid detiene ambos bucles en cuanto se encuentra la primera coincidencia.
Hacer await de cada elemento en orden
for...of se detiene en cada await. El mismo código dentro de forEach lanzaría todas las peticiones a la vez sin esperar.
Ejecutor de bucles
Elige un bucle y unos datos. El bucle se ejecuta de verdad y cada vuelta aparece abajo.
Bucle
Datos
Array
String
Objeto simple
Map
break después de la tercera vuelta
Lo que se ejecuta
Salida
Vuelta {n}: {v}
forEach no tiene break. El return dentro del callback solo termina esa llamada, así que todas las vueltas se ejecutan igualmente.