JavaScript es uno de los lenguajes de programación que le permite iterar sobre las propiedades de los objetos sin utilizar ninguna herramienta compleja o API.

En este artículo, vamos a explorar, cómo esta simple técnica evolucionó a lo largo de los años y por qué tenemos algo ahora, que puede ser clasificado como elegante!

Vamos a echar un vistazo al código de abajo y luego podemos hablar más

var obj = { // Yes 'var'...bad old days!
a: 1,
b: 2,
c: 3,
};for (var key in obj) {
if (obj.hasOwnProperty(key)) { // <- Ahh...What's this??
var value = obj;
console.log(key, ' : ', value);
}
}

Salida:

a : 1
b : 2
c : 3

Muchos de nosotros pasamos por alto la comprobación obj.hasOwnProperty

En JavaScript, cuando estás iterando, es muy crítico evitar la iteración en las propiedades de los padres de los objetos (y sus propiedades de los padres y sus padres… ¡Ya tienes la idea!). No hacerlo puede resultar en un código lento.

Por suerte, la mayoría de nosotros trabaja con algún tipo de herramienta de linting que dará una advertencia si se pierde esta comprobación.

Modo – Iteración en ES6+

¡Ahora pasemos al JavaScript moderno o ES6+!

Reconociendo este problema, el equipo de ECMA ha añadido soporte para la iteración simple en ES6.

Y comienza con – Object.entries()

El método Object.entries()devuelve un array de pares de propiedades enumerables propias de un objeto dado , en el mismo orden que el proporcionado por un bucle for…in (con la diferencia de que un bucle for-in enumera también las propiedades de la cadena de prototipos).

Por ejemplo, el siguiente código

const obj = {
a: 1,
b: 2,
c: 3
};
console.log(Object.entries(obj));

dará una salida como la siguiente, Un array de arrays de dos elementos, donde en el índice: 0, tendremos la clave y en el índice:1, tendremos el valor

Ahora bien, esta simple función dará lugar a una elegante iteración de Objeto, echa un vistazo al siguiente código.

Paso 1: Comienza con `Object.entries`

const obj = {
a: 1,
b: 2,
c: 3
};for (const entry of Object.entries(obj)) {
console.log(`key: ${entry} : value: ${entry}`);
}

Salida:

key: a : value: 1
key: b : value: 2
key: c : value: 3

Ya está bien, pero hagámoslo impresionante

Paso 2: Usar Destrucción

Entendamos la «entrada» si actualizamos el bucle for anterior como abajo

...for (const entry of Object.entries(obj)) {
console.log(entry);
}

la salida será como abajo

Hmm….¿qué tenemos aquí?

Bueno, cada entrada es un Array con exactamente dos elementos (llámalo ‘tupla’), así que usando la desestructuración de Array de ES6, podemos escribir código como

const entry = ;
const = entry;
console.log(`key: ${key} : value: ${value}`);

Apliquemos el mismo concepto en el bucle for

const obj = {
a: 1,
b: 2,
c: 3
};for (const of Object.entries(obj)) {
console.log(`${key} : ${value}`);
}

Woohoo… ¡es realmente Impresionante!

Iteración con forEach

Si quieres aplicar la misma técnica a las funciones incorporadas en los arrays, prueba el siguiente código

const obj = {
a: 1,
b: 2,
c: 3
};
Object.entries(obj).forEach(() => {
console.info(`${key} : ${value}`);
});

Salida:

a : 1
b : 2
c : 3

¡Gracias!