JavaScript for...in VS for...of bucle
Este artículo compara el bucle for..in y for..of en JavaScript. Identifica la diferencia entre ellos y muestra dónde podemos usarlos.
for..in recorre las propiedades de un objeto. Devuelve una clave en cada iteración que se puede usar para obtener el valor de esa clave en particular. El for..of crea un bucle sobre los valores de un objeto iterable que incluye Map, Array, Set, String y TypedArray integrados.
Ambos tienen una variable y un iterable. Para ambos, la variable puede ser const, let o var. En for..of, el iterable es un objeto cuyas propiedades iterables se iteran mientras que el iterable de for..in es un objeto en sí mismo.
Usando el bucle for..in en JavaScript
const person = {
firstname: 'Delft',
lastname: 'Stack',
age: 30,
email: 'Delft.Stack@gmail.com'
};
for (const prop in person) console.log(`${prop}: ${person[prop]}`)
Producción :
"firstname: Delft"
"lastname: Stack"
"age: 30"
"email: Delft.Stack@gmail.com"
En el código anterior, for..in está recorriendo las propiedades de un objeto llamado person. Practiquemos el uso de for..in mediante la iteración de sus propiedades.
Vea el código de ejemplo a continuación.
const person = {
firstname: 'Delft',
lastname: 'Stack',
age: 30,
email: 'Delft.Stack@gmail.com'
};
function email() {
this.email = 'maofficial@gmail.com';
}
email.prototype = person;
var obj = new email();
for (const prop in obj) {
if (obj.hasOwnProperty(prop)) {
console.log(`obj.${prop} = ${obj[prop]}`);
}
}
Producción :
obj.email = maofficial@gmail.com
El código anterior usa el bucle for..in para verificar si el objeto tiene una propiedad particular como propia o no usando .hasOwnProperty(). El .hasOwnProperty() devuelve true si la propiedad especificada es realmente su propia propiedad.
Usando el bucle for..of en JavaScript
Empecemos a practicar el bucle for..of con un array.
const array = ['apple', 'banana', 'orange'];
for (const value of array) {
console.log(value);
}
Producción :
apple
banana
orange
En el siguiente código, el iterable es una cadena.
const name = 'Delft';
for (const value of name) {
console.log(value);
}
Producción :
M
e
h
v
i
s
h
La siguiente instancia de código presenta el uso de for..of con Map.
const personMap =
new Map([['firstname', 'Delft'], ['lastname', 'Stack'], ['age', 30]]);
for (const entry of personMap) {
console.log(entry);
}
Producción :
[ 'firstname', 'Delft' ]
[ 'lastname', 'Stack' ]
[ 'age', 30 ]
Practiquemos el for..of usando un objeto que implementa explícitamente el protocolo iterable.
const userDefinedfunctions = {
[Symbol.iterator]() {
return {
num: 0,
next() {
if (this.num < 10) {
return {value: this.num++, done: false};
}
return {value: undefined, done: true};
}
};
}
};
for (const value of userDefinedfunctions) console.log(value);
Producción :
0
1
2
3
4
5
6
7
8
9
Symbol.iterator se utiliza como iterador predeterminado para el objeto. Este símbolo es usado por el bucle for-of donde tenemos el iterable cuyas propiedades iterables son iteradas.
