Explicación detallada de las diferencias entre for...in y for...of en JavaScript

En JavaScript, for...in y for...of son dos estructuras de bucle comunes. Aunque su sintaxis es similar, su funcionalidad y los escenarios en los que son aplicables son diferentes. Este artículo explorará en profundidad las diferencias entre estos dos tipos de bucles, con ejemplos que ayudarán a entender mejor cómo utilizarlos.

1. for...in

for...in se utiliza principalmente para recorrer las propiedades enumerables de un objeto, es decir, las claves (nombres de propiedades). Además de recorrer las propiedades propias del objeto, también recorrerá las propiedades heredadas de la cadena de prototipos, por lo que es comúnmente usado cuando se trabaja con objetos regulares.

Ejemplo:

1
const obj = { a: 1, b: 2, c: 3 };
2

3
for (const key in obj) {
4
  console.log(key); // Imprime a, b, c
5
}

• Características:

  • for...in recorre las claves de un objeto (nombres de propiedades o índices de un array).
  • Recorre todas las propiedades enumerables, incluidas las heredadas.
  • El orden de la iteración no está garantizado, por lo que no es adecuado para escenarios que requieren un orden específico.

• Escenarios de uso:

  • Recorrer las propiedades de un objeto.
  • No se recomienda para recorrer arrays, ya que for...in solo recorre los índices y el orden no es confiable.

2. for...of

for...of se utiliza para recorrer los valores de objetos iterables como arrays, cadenas de texto, Map, Set, etc. A diferencia de for...in, for...of se enfoca en los valores del objeto en lugar de sus claves, por lo que es más adecuado para trabajar con arrays, cadenas de texto y otros objetos iterables.

Ejemplo:

1
const arr = [1, 2, 3];
2

3
for (const value of arr) {
4
  console.log(value); // Imprime 1, 2, 3
5
}

• Características:

  • for...of recorre los valores de los objetos iterables.
  • Es adecuado para todos los objetos iterables, como arrays, cadenas de texto, Set, Map, etc.
  • No es adecuado para objetos regulares, ya que estos no son iterables.

• Escenarios de uso:

  • Recorrer los valores de arrays, cadenas de texto, Set, Map, etc.
  • No es adecuado para recorrer las propiedades de un objeto.

Resumen de diferencias

1. Contenido de la iteración:

   • for...in recorre las claves del objeto (nombres de propiedades o índices).
   • for...of recorre los valores de los objetos iterables.

2. Tipo de objeto aplicable:

   • for...in es adecuado para recorrer las propiedades de un objeto, aunque también puede recorrer los índices de un array (pero no se recomienda).
   • for...of es adecuado para recorrer los valores de objetos iterables como arrays, cadenas de texto, Map, Set, etc.

Comparación de ejemplos

1
const arr = ["a", "b", "c"];
2

3
// for...in recorre los índices (claves)
4
for (const index in arr) {
5
  console.log(index); // Imprime 0, 1, 2
6
}
7

8
// for...of recorre los valores
9
for (const value of arr) {
10
  console.log(value); // Imprime 'a', 'b', 'c'
11
}

Recomendaciones de uso

• Si necesitas recorrer las propiedades de un objeto, utiliza for...in.
• Si necesitas recorrer los valores de un array u otro objeto iterable, utiliza for...of.