Hay varias formas de iterar a través de objetos, matrices y elementos DOM en JavaScript. Tradicionalmente, el for básico loop se utilizó para realizar una iteración. Pero, últimamente, los otros métodos de iteración se han vuelto más populares.
En este artículo, describiré la diferencia entre el for...of y for...in bucles; dos de los métodos de iteración más utilizados en JavaScript moderno. Ambas declaraciones se utilizan con fines de bucle. La principal diferencia entre ellos es sobre lo que iteran.
for...in Bucle
La instrucción for...in itera sobre todas las propiedades enumerables de un objeto, incluidas las propiedades enumerables heredadas sin ningún orden en particular:
const book = {
title: 'JavaScript for Beginners',
price: '$9.99',
year: 2018,
pubisher: 'Amazon, Inc.'
};
// iterate over the object
for (const key in book) {
console.log(`${key} --> ${book[key]}`);
}
// title --> JavaScript for Beginners
// price --> $9.99
// year --> 2018
// pubisher --> Amazon, Inc.
Para omitir las propiedades heredadas del objeto, solo use el hasOwnProperty() método:
for (const key in book) {
if (book.hasOwnProperty(key)) {
console.log(`${key} --> ${book[key]}`);
}
}
for...of Bucle
La instrucción for...of recorre los valores de objetos iterables como matrices, cadenas, mapas, conjuntos, NodeLists y similares. No funciona para objetos porque no son iterables.
Aquí hay un ejemplo:
const names = ['Alex', 'Emma', 'Atta', 'John'];
// iterate over names
for (const name of names) {
console.log(`Hey ${name}!`);
}
// Hey Alex!
// Hey Emma!
// Hey Atta!
// Hey John!
Regla general: Utilice siempre el for...in bucle para iterar sobre los objetos. Para todo tipo de objetos iterables en JavaScript, for...of es el camino a seguir!