Diferencias entre bucles "for in" y "for of"

Question

¿Cuáles serían los parámetros para optar por un bucle for in en vez de un for of, o viceversa? O bien, ¿cuál sería la diferencia entre ambos?

Answer 1

Antes de responder la pregunta que realizas, tenemos que definir que es un "for in" y "for of".

for...in

El bucle for...in se usa para iterar sobre las propiedades enumerables de un objeto (incluidas las propiedades heredadas).

Como podemos usarla (usarla cuando, resp. pregunta 1):

• Objetos: for...in es ideal para iterar sobre las propiedades de un objeto.
• Propiedades enumerables: Incluye propiedades heredadas.
• Orden de iteración: No garantiza el orden de las propiedades (especialmente en objetos no iterables).

Ejemplo:

const person = {
    name: 'John',
    age: 30,
    city: 'New York'
};

for (const key in person) {
    console.log(`${key}: ${person[key]}`);
}

for...of

El bucle for...of se usa para iterar sobre valores de objetos iterables, como arrays, strings, Map, Set, etc.

Como podemos usarla (usarla cuando, resp. pregunta 1):

• Estructuras de datos iterables: for...of es ideal para iterar sobre arrays, strings, Map, Set, y otros iterables.
• Valores: Itera sobre los valores directamente.
• Propiedades no enumerables: No itera sobre las propiedades heredadas.

Ejemplo:

const array = ['a', 'b', 'c'];

for (const value of array) {
    console.log(value);
}

Para responder la pregunta #2, lo haremos implementando cada bucle:

for...in con un Array (no recomendado):

Nota: for...in en arrays no es recomendado porque puede incluir propiedades no numéricas agregadas al array.

let array = ['a', 'b', 'c'];
 
array['ABC'] = 1; //corrupción de tipo de array a mixto ... ya no es un array de cadenas ...

for (const index in array) {
    console.log(index +'=>'+ array[index]);
}

for...of con un Objeto (no permitido):

Nota: Los objetos no son iterables por defecto, por lo que for...of no funcionará aquí.

const person = {
    name: 'John',
    age: 30,
    city: 'New York'
};

for (const value of person) { // Ourtput Error: person is not iterable
    console.log(value);
}

Entonces:

Con los ejemplos anteriores podrás evaluar cuando debes implementar cada bucle... la pregunta puede ser respondida canónicamente, ya que la documentación especifica cuando usar cada bucle:

• for...in

• for...of

en el sitio en inglés fue aceptada la pregunta y debidamente respondida tambien.