Desestructuración en JavaScript: cómo extraer valores sin boilerplate

La desestructuración es el proceso de “desempaquetar” una estructura iterable o un objeto y asignar sus piezas a variables. En lugar de extraer manualmente cada elemento, se puede hacer en una sola línea.

Arrays

const numbers = [1, 2, 3];
let [x, y, z] = numbers;
console.log(x); // 1

También se pueden saltar posiciones:

let [x, , z] = numbers; // y queda undefined

O asignar valores por defecto cuando el array es más corto:

let [x, y, z, a = 4] = numbers;

El intercambio de valores es trivial sin variable temporal:

let a = 1, b = 2;
[a, b] = [b, a];

Objetos

La clave debe coincidir con la propiedad del objeto:

const employee = { name: 'Julia', age: 27, job: {}, workSchedule: {} };
let { name, age, job, workSchedule } = employee;

Si se prefieren nombres distintos se usan alias:

let { name: employeeName, age: employeeAge } = employee;

Valores por defecto también funcionan:

let { name = 'john', age = 18 } = employee;

Y se puede desestructurar anidado:

const employee = {
  workSchedule: {
    mon: { open: 12, close: 22 },
    tue: { open: 11, close: 23 },
  }
};
let { workSchedule: { mon, tue } } = employee;
console.log(mon); // { open: 12, close: 22 }

Aunque múltiples niveles de anidación pueden perder legibilidad.

Funciones

Al recibir objetos como parámetros, la desestructuración simplifica la firma:

const dispatchDelivery = (endpoint, { userId, time = '00:00', address, items = [] }) => {
  // lógica
};

dispatchDelivery('api/dispatch-delivery', {
  userId: 3392,
  address: 'Villas del Sol',
  time: '22:30',
  items: ['Beers', 'Sodas', 'Doritos']
});

Esta forma hace que la función sea más legible y que los valores opcionales tengan defaults claros.

Operador Spread

La desestructuración se combina bien con el spread ... para clonar y combinar objetos o arrays sin mutación:

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

Con estos patrones, la manipulación de datos en JavaScript se vuelve más concisa y expresiva, lo que facilita el mantenimiento y la comprensión del código.

El conocimiento profundo de la desestructuración permite escribir funciones más limpias y manejar estructuras de datos complejas con menos líneas de código.