Destructuración de colecciones en javascript

La desestructuración de objetos es una característica de JavaScript que permite extraer propiedades de un objeto y asignarlas a variables de forma individual.

Con la desestructuración, podemos acceder rápidamente a las propiedades de un objeto sin necesidad de usar múltiples líneas de código (lo que simplifica mucho el código).

Es muy útil a la hora de trabajar con datos complejos, como los objetos anidados, o los que obtenemos como respuestas a APIs.

Sintaxis básica

La desestructuración de objetos utiliza llaves ({}) para extraer las propiedades del objeto y asignarlas a variables. La clave de cada propiedad debe coincidir con el nombre de la variable.

La sintaxis básica es la siguiente:

const objeto = {
  propiedad1: 'valor1',
  propiedad2: 'valor2'
};

const { propiedad1, propiedad2 } = objeto;

Vamos a verlo con un ejemplo

const producto = { nombre: "Ordenador", precio: 1000 };
const { nombre, precio } = producto;

console.log(nombre); // "Ordenador"
console.log(precio); // 1000

Nombres personalizados

Si necesitas usar un nombre de variable distinto al de la propiedad, puedes renombrarlas al momento de la desestructuración.

const producto = { nombre: "Ordenador", precio: 1000 };
const { nombre: nombreProducto, precio: costo } = producto;

console.log(nombreProducto); // "Ordenador"
console.log(costo); // 1000

Valores por defecto

También podemos asignar valores predeterminados a los valores. Si la propiedad no existe en el objeto, se usará el valor por defecto.

const producto = { nombre: "Ordenador" };
const { nombre, precio = 500 } = producto;

console.log(nombre); // "Ordenador"
console.log(precio); // 500

Objetos anidados

Cuando las propiedades están anidadas dentro de objetos, puedes desestructurarlas de manera jerárquica.

const usuario = {
  id: 1,
  perfil: { nombre: "Ana", edad: 30 },
};

const {
  perfil: { nombre, edad },
} = usuario;

console.log(nombre); // "Ana"
console.log(edad); // 30

Uso en funciones

La desestructuración también se puede aplicar directamente en los parámetros de las funciones.

function imprimirPropiedades({ propiedad1, propiedad2 }) {
  console.log(propiedad1);
  console.log(propiedad2);
}

const objeto = {
  propiedad1: 'valor1',
  propiedad2: 'valor2'
};

imprimirPropiedades(objeto);

También se pueden usar en los objetos que devuelve una función.

function obtenerDatos() {
  return { nombre: "Mario", edad: 33 };
}

const { nombre, edad } = obtenerDatos();

console.log(nombre); // "Mario"
console.log(edad);   // 33

Ejemplos prácticos

const respuesta = {
  status: 200,
  data: { usuario: { id: 1, nombre: "Laura" } },
};

const {
  data: {
    usuario: { nombre },
  },
} = respuesta;

console.log(nombre); // "Laura"

const usuarios = [
  { nombre: "Juan", edad: 25 },
  { nombre: "María", edad: 30 },
  { nombre: "Carlos", edad: 35 },
];

for (const { nombre, edad } of usuarios) {
  console.log(`${nombre} tiene ${edad} años.`);
}
// "Juan tiene 25 años."
// "María tiene 30 años."
// "Carlos tiene 35 años."

const respuesta = {
  usuario: { nombre: "Laura", edad: 28 },
  productos: ["Ordenador", "Smartphone"]
};

const {
  usuario: { nombre },
  productos: [producto1, producto2]
} = respuesta;

console.log(nombre);     // "Laura"
console.log(producto1);  // "Ordenador"
console.log(producto2);  // "Smartphone"