Unpacking iterando objetos en Javascript

Hemos visto múltiples formas de realizar un unpacking de objetos con Javascript: objetos sencillos, objetos anidados,… pero, ¿qué sucede si dentro hay un array de objetos? En este caso vamos a ver cómo podemos realizar un unpacking iterando objetos en Javascript.

Definir el objeto con array

Lo primero será definir un objeto que tenga un array, por ejemplo el objeto autor ya utilizado en otras ocasiones:

const autor = {
  nombre: "Miguel de Cervantes",
  libros: [
    { titulo: "Don Quijote de la Mancha", año: 1605 },
    { titulo: "Novelas Ejemplares", año: 1613 },
    { titulo: "Los trabajos de Persiles y Sigismunda", año: 1617 }
  ]
};

Vemos que la propiedad libros contiene un conjunto de objetos representando los libros del array.

Unpacking simple

Si utilizamos un unpacking de objetos y hacemos lo siguiente:

const { libros: [primerLibro] } = autor;
console.log(primerLibro);

Lo que vamos a conseguir es obtener el primer valor del objeto anidado.

Unpacking iterando objetos

Si bien, a nosotros lo que nos interesa es hacer un unpacking iterando objetos en Javascript para poder mostrar el valor de todos los libros del array. Para poder hacer una iteración nos apoyamos en la sentencia for...of. Dentro de la sentencia for...of vamos a utilizar el unpacking del objeto. La estructura de código será la siguiente:

for (const {propiedad1, propiedad2} of array) {
  // código
}

Así, si queremos mostrar todos los libros del array escribiremos:

const { libros } = autor;
for (const { titulo, año } of libros) {
  console.log(`${titulo} (${año})`);
}

Vemos que hemos hecho una primera desestructuración de la propiedad libros que es la que tiene el array y que luego se la hemos pasado a la estructura for...of. De esta forma hemos conseguido hacer un unpacking iterando objetos en Javascript.