Destructuring en JavaScript: extraer valores de arrays y objetos sin repetición

El destructuring es una sintaxis de ES6 que permite extraer valores de arrays y propiedades de objetos en variables individuales con una sola línea de código. Elimina el código repetitivo de asignaciones manuales y hace que trabajar con estructuras de datos complejas, como respuestas de API, sea mucho más limpio.

Destructuring de arrays

Los valores se extraen por posición. Puedes saltar elementos con comas vacías y usar rest para agrupar el resto:

const colores = ['rojo', 'verde', 'azul', 'amarillo'];

// Básico
const [primero, segundo] = colores;
console.log(primero, segundo);  // 'rojo' 'verde'

// Saltar elementos
const [, , tercero] = colores;
console.log(tercero);  // 'azul'

// Rest operator
const [cabeza, ...resto] = colores;
console.log(cabeza);  // 'rojo'
console.log(resto);   // ['verde', 'azul', 'amarillo']

// Valores por defecto
const [a, b, c, d, e = 'violeta'] = colores;
console.log(e);  // 'violeta' (posición no existe en el array)

// Intercambio de variables sin temporal
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y);  // 2 1

Destructuring de objetos

Los valores se extraen por nombre de propiedad. El orden no importa:

const usuario = {
  id: 42,
  nombre: 'Ana García',
  email: '[email protected]',
  rol: 'admin',
  edad: 30
};

// Básico
const { nombre, email } = usuario;
console.log(nombre, email);  // 'Ana García' '[email protected]'

// Renombrar la variable
const { nombre: nombreCompleto, rol: tipoRol } = usuario;
console.log(nombreCompleto);  // 'Ana García'
console.log(tipoRol);         // 'admin'

// Valores por defecto
const { pais = 'España', nombre: n } = usuario;
console.log(pais);  // 'España' (propiedad no existe)

// Rest
const { id, ...datosPersonales } = usuario;
console.log(id);             // 42
console.log(datosPersonales); // {nombre, email, rol, edad}

Destructuring en parámetros de función

Es especialmente útil cuando una función recibe un objeto de configuración o una respuesta de API:

// Sin destructuring:
function mostrarUsuario(usuario) {
  console.log(usuario.nombre + ' (' + usuario.email + ')');
}

// Con destructuring en el parámetro:
function mostrarUsuario({ nombre, email, rol = 'usuario' }) {
  console.log(`${nombre} (${email}) - ${rol}`);
}

mostrarUsuario({ nombre: 'Luis', email: '[email protected]' });
// "Luis ([email protected]) - usuario"

// En React es un patrón muy frecuente:
function TarjetaUsuario({ nombre, avatar, admin = false }) {
  return `${admin ? '?' : ''} ${nombre}`;
}

Destructuring anidado

Se pueden extraer valores de estructuras anidadas, aunque conviene no abusar porque puede volverse ilegible:

const empresa = {
  nombre: 'Acme Corp',
  direccion: {
    ciudad: 'Madrid',
    pais: 'España',
    coordenadas: [40.416775, -3.703790]
  }
};

const {
  nombre: nombreEmpresa,
  direccion: {
    ciudad,
    coordenadas: [latitud, longitud]
  }
} = empresa;

console.log(nombreEmpresa);  // 'Acme Corp'
console.log(ciudad);         // 'Madrid'
console.log(latitud);        // 40.416775

// Cuidado: la variable 'direccion' no está declarada aquí
// (el destructuring la consume para acceder a sus propiedades)

Destructuring con respuestas de API

Un caso de uso muy frecuente: extraer solo los campos necesarios de una respuesta JSON:

async function obtenerUsuario(id) {
  const response = await fetch(`/api/usuarios/${id}`);
  const { data: { nombre, email, permisos: { admin = false } = {} } } = await response.json();
  return { nombre, email, admin };
}

// Array de resultados con destructuring en map:
const productos = [
  { id: 1, nombre: 'Teclado', precio: 89, stock: 15 },
  { id: 2, nombre: 'Ratón', precio: 45, stock: 3 }
];

const resumen = productos.map(({ nombre, precio }) =>
  `${nombre}: ${precio}€`
);
console.log(resumen);
// ['Teclado: 89€', 'Ratón: 45€']

El destructuring no es magia: si intentas desestructurar null o undefined, obtienes un TypeError. Combínalo con optional chaining o valores por defecto cuando el dato pueda no existir.