Desestructuración y spread/rest

Extrae datos de objetos y arrays de forma limpia, y luego copia y combina estructuras con el operador spread.

8 min · 3 preguntas

Cuando recibes datos de una API, a menudo solo necesitas unas pocas propiedades. La desestructuración las extrae en una línea, con la posibilidad de renombrarlas, adentrarse en objetos anidados y proporcionar un valor por defecto si la propiedad falta.

const user = {
  id: 42,
  name: "Lea",
  address: { city: "Lyon", zip: "69001" }
};

const { name, address: { city } } = user;
const { role = "guest" } = user;

console.log(name, city, role); // "Lea" "Lyon" "guest"

La desestructuración también funciona con arrays, esta vez por posición. Su uso más profesional sigue siendo el de los parámetros de función: en lugar de recibir un objeto opaco, la firma anuncia exactamente qué propiedades se esperan. El código se vuelve autodocumentado.

const podium = ["gold", "silver", "bronze"];
const [first, , third] = podium;
console.log(first, third); // "gold" "bronze"

function formatUser({ name, role = "guest" }) {
  return `${name} (${role})`;
}

console.log(formatUser({ name: "Sam" }));
// "Sam (guest)"

El mismo operador ... tiene dos caras. Como spread, expande un array o un objeto para copiarlo o combinarlo: se usa mucho para aplicar ajustes por defecto y luego sobrescribirlos. Como rest, reúne "todo lo que queda" en un array, por ejemplo para aceptar un número variable de argumentos.

const baseConfig = { theme: "dark", lang: "fr" };
const overrides = { lang: "en" };
const config = { ...baseConfig, ...overrides };
// { theme: "dark", lang: "en" }

const scores = [12, 18, 9];
const allScores = [...scores, 20]; // [12, 18, 9, 20]

function sumAll(...numbers) {
  return numbers.reduce((sum, n) => sum + n, 0);
}
console.log(sumAll(1, 2, 3)); // 6

Ejercicio mental antes de pasar al cuestionario: en { ...baseConfig, ...overrides }, ¿qué ocurre si ambos objetos definen lang? Gana el último escrito. Este detalle de orden es exactamente lo que hace posible el patrón "valores por defecto y luego sobrescrituras".

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Qué hace la línea const { city } = user;?
   • Crea una variable city que contiene user.city
   • Renombra el objeto user a city
   • Crea un nuevo objeto vacío llamado city
2. En function log(...args), ¿qué es args dentro de la función?
   • Un objeto clave-valor
   • Un array real que contiene todos los argumentos recibidos
   • Una cadena
   • Únicamente el primer argumento
3. Después de const copy = { ...original };, ¿se duplican los objetos anidados?
   • Sí, la copia es totalmente independiente
   • No, siguen compartidos: la copia es superficial
   • Se eliminan de la copia