Los bucles for...in y for...of son dos bucles especialmente pensados para iterar en iteraciones a través de objetos y colecciones de datos.
Aunque la sintaxis es bastante parecida, cada uno tiene su propio propósito y características (en realidad tienen bastantes deferencias).
for...initera sobre las claves.for...ofitera sobre los valores.
Bucle for...in
El bucle for...in es utilizado para iterar sobre las propiedades enumerables de un objeto. La sintaxis es la siguiente
for (const key in object) {
// Bloque de código
}- key: Una variable que representa la clave de cada propiedad del objeto en cada iteración.
- object: El objeto cuyas propiedades serán iteradas.
Vamos a verlo con un ejemplo,
const persona = {
nombre: 'Luis',
edad: 30
};
// `for...in` recorre las claves del objeto
for (const clave in persona) {
console.log(`Clave: ${clave}, Valor: ${persona[clave]}`);
}
// Clave: nombre, Valor: Luis
// Clave: edad, Valor: 30- Itera sobre las propiedades enumerables:
for...initera sobre las propiedades enumerables del objeto (incluyendo las propiedades heredadas de la cadena de prototipos). - Orden de iteración: El orden en que se iteran las propiedades no está garantizado.
Bucle for...of
El bucle for...of es utilizado para iterar sobre los valores de objetos iterables (como arrays, strings, maps), sets y otros tipos de colecciones. La sintaxis es la siguiente
for (const value of iterable) {
// Bloque de código
}- value: Una variable que representa el valor de cada elemento en el objeto iterable en cada iteración.
- iterable: El objeto iterable cuyos valores serán iterados.
Por ejemplo, así funcionaría con un array,
const numeros = [1, 2, 3, 4, 5];
for (const numero of numeros) {
console.log(numero);
}
// Salida:
// 1
// 2
// 3
// 4
// 5- Iteración sobre valores: Itera sobre los valores de un objeto iterable
- Orden de iteración: Itera en el orden natural de los elementos en el iterable.
- No itinerable: no puede ser usado directamente con objetos que no son iterables, (como objetos literales normales)
Comparación entre for...in y for...of
Para entender la diferencia entre for...in y for...of, vamos a verlo con un ejemplo
const colores = ['rojo', 'verde', 'azul'];
// `for...of` iterará sobre las claves
for (const index in colores) {
console.log(index); // 0, 1, 2
}
// `for...of` iterará sobre los valores
for (const color of colores) {
console.log(color); // rojo, verde, azul
}En este ejemplo,
for...initerará sobre las claves (en este caso los índices y me da 0, 1 y 2)for...ofiterará sobre los valores directamente (y devolverá rojo, verde, azul)
Esto es así porque un Array en JavaScript es un objeto, en el que la clave es el índice del Array.
- Usa
for...incon objetos: Para objetos literales y cuando necesites iterar sobre las claves y sus valores. - Usa
for...ofcon arrays y otros iterables: Preferido para iterar sobre arrays, strings y otros objetos iterables