Teoría: Recorriendo las propiedades de un objeto

Cuando trabajamos con objetos en JavaScript, a veces necesitamos recorrer sus propiedades.

A diferencia de los arrays, los objetos no tienen un orden predefinido ni se pueden recorrer directamente con for..of. Sin embargo, existen varias formas de hacerlo, y aquí veremos las más útiles.

El Bucle for..in

La forma más sencilla de recorrer un objeto es con el bucle for..in. Este bucle recorre todas las propiedades del objeto:

const curso = { nombre: 'JS: React', slug: 'js-react' };

for (const propiedad in curso) {
  console.log(`curso.${propiedad} = ${curso[propiedad]}`);
}
// curso.nombre = JS: React
// curso.slug = js-react

⚠️ Sin embargo, for..in tiene una peculiaridad: también recorre las propiedades heredadas del prototipo del objeto. Esto puede generar resultados inesperados, por lo que en la mayoría de los casos es mejor utilizar otros métodos.

Métodos para recorrer objetos

Para un mayor control al recorrer objetos, JavaScript nos proporciona tres métodos muy útiles:

Object.keys(obj): Obtener un array de claves

Si solo queremos las claves del objeto, podemos usar Object.keys(obj), que devuelve un array con los nombres de las propiedades.

const curso = { nombre: 'JS: React', slug: 'js-react' };

const claves = Object.keys(curso);
console.log(claves); // [ 'nombre', 'slug' ]

Podemos recorrer este array con un bucle for..of:

for (const clave of claves) {
  console.log(curso[clave]); // Accede a los valores usando las claves
}

Object.values(obj): Obtener un array de valores

Si no necesitamos las claves y solo queremos los valores, podemos usar Object.values(obj), que devuelve un array con los valores de las propiedades del objeto.

const valores = Object.values(curso);
console.log(valores); // [ 'JS: React', 'js-react' ]

for (const valor of valores) {
  console.log(valor);
}

Object.entries(obj): Obtener claves y valores juntos

Si queremos tanto las claves como los valores al mismo tiempo, Object.entries(obj) nos devuelve un array donde cada elemento es otro array con [clave, valor].

const pares = Object.entries(curso);
console.log(pares);
// [[ 'nombre', 'JS: React' ], [ 'slug', 'js-react' ]]

Esto nos permite recorrer todo el objeto de una manera elegante usando desestructuración:

for (const [clave, valor] of pares) {
  console.log(clave, valor);
}

##Encontrar claves con ciertos valores

Supongamos que tenemos un objeto donde las claves son nombres de temas de una lección y los valores representan la cantidad de estudiantes que estudiaron cada tema. Queremos encontrar las claves donde el valor coincida con un número dado.

Función findKeys()

const temas = {
  sintaxis: 3,
  uso: 2,
  foreach: 10,
  operaciones: 10,
  desestructuración: 2,
  arreglo: 2,
};

const findKeys = (obj, valorBuscado) => {
  const resultado = [];

  for (const [clave, valor] of Object.entries(obj)) {
    if (valor === valorBuscado) {
      resultado.push(clave);
    }
  }

  return resultado;
};

console.log(findKeys(temas, 10)); // ['foreach', 'operaciones']
console.log(findKeys(temas, 3));  // ['sintaxis']

Orden de las Claves en un Objeto

A diferencia de los arrays, los objetos en JavaScript no garantizan un orden estricto en sus propiedades. El orden de las claves sigue ciertas reglas internas de JavaScript pero no siempre es intuitivo. Si necesitamos mantener un orden específico, podemos usar un array adicional para almacenar las claves en el orden deseado.

const ordenClaves = ['sintaxis', 'uso', 'foreach', 'operaciones', 'desestructuración', 'arreglo'];

for (const clave of ordenClaves) {
  console.log(`${clave}: ${temas[clave]}`);
}