Iteración: for...in y for...of

¿Qué son for...in y for...of?

for...in y for...of son dos tipos de bucles introducidos en JavaScript para simplificar la iteración sobre colecciones. Aunque su sintaxis es similar, tienen propósitos completamente diferentes y no son intercambiables.

for...in itera sobre las claves enumerables de un objeto (nombres de propiedades), mientras que for...of itera sobre los valores de objetos iterables como arrays, strings, Maps y Sets. Elegir el correcto según tu caso de uso evita errores sutiles y hace tu código más expresivo.

for...in para objetos

El bucle for...in está diseñado para iterar sobre las propiedades enumerables de un objeto. En cada iteración, la variable recibe el nombre de una propiedad (clave) del objeto, no su valor.

for...in recorre todas las propiedades enumerables del objeto, incluyendo las heredadas del prototipo. La variable del bucle contiene el nombre de la propiedad (string), no el valor. Para acceder al valor, debes usar la notación de corchetes: objeto[clave]. Es la forma más natural de iterar sobre las propiedades de un objeto plano.

for...of para arrays

El bucle for...of está diseñado para iterar sobre los valores de objetos iterables. A diferencia de for...in, obtienes directamente los valores, no los índices o claves.

for...of recorre los valores del array en orden, similar a .forEach() pero con la ventaja de poder usar break y continue. No tienes acceso directo al índice, pero puedes usar array.entries() si lo necesitas. Es más limpio y menos propenso a errores que un bucle for tradicional cuando solo necesitas los valores.

Diferencias clave

La diferencia fundamental entre for...in y for...of es qué iteran: for...in itera sobre claves (propiedades), mientras for...of itera sobre valores. Esta diferencia define cuándo usar cada uno.

Con arrays, for...in te da los índices como strings ("0", "1", "2"), mientras for...of te da los valores directamente. Con objetos, for...in funciona perfectamente dando las claves, pero for...of falla porque los objetos planos no son iterables. Usa for...in para objetos, for...of para arrays y otros iterables.

for...of con strings

Los strings son iterables en JavaScript, por lo que puedes usar for...of para recorrer cada carácter. Esto es más limpio que acceder a caracteres por índice con un bucle tradicional.

for...of trata los strings como secuencias de caracteres, iterando sobre cada uno. Maneja correctamente caracteres Unicode que ocupan múltiples bytes, a diferencia de acceder por índice. Es especialmente útil cuando necesitas procesar cada carácter de un string sin preocuparte por índices o longitudes.

Problemas con for...in

Aunque for...in es útil para objetos, tiene comportamientos inesperados con arrays y puede incluir propiedades heredadas del prototipo. Es importante conocer estas limitaciones para evitar bugs sutiles.

for...in no garantiza orden de iteración, puede incluir propiedades heredadas del prototipo, y con arrays te da índices como strings en lugar de valores. Para arrays, siempre prefiere for...of o métodos como .forEach(). Si usas for...in con objetos que podrían tener prototipos modificados, usa hasOwnProperty() para filtrar propiedades heredadas.

for...in vs for...of

Entender cuándo usar for...in versus for...of es fundamental para escribir código JavaScript claro y correcto. Cada uno está optimizado para diferentes tipos de datos y casos de uso.

Usa for...in cuando necesites iterar sobre las propiedades de un objeto plano. Usa for...of cuando necesites iterar sobre valores de arrays, strings, Maps, Sets u otros iterables. La regla simple: for...in para objetos, for...of para colecciones. Esto hace tu código más predecible y menos propenso a errores.

Casos prácticos

Veamos ejemplos reales de cómo usar for...in y for...of efectivamente en situaciones comunes de desarrollo, desde procesamiento de objetos hasta iteración sobre estructuras de datos modernas.

Los casos prácticos muestran aplicaciones reales: copiar propiedades de objetos, contar propiedades, validar objetos, procesar arrays con lógica compleja, y trabajar con estructuras modernas como Map y Set. Cada ejemplo demuestra cuándo cada bucle es la herramienta correcta, aprovechando sus fortalezas específicas para escribir código más expresivo y mantenible.

Resumen