Lección 35: Destructuring

🧠 Concepto

El destructuring (desestructuración) es una sintaxis de ES6 que permite extraer valores de arrays u objetos en variables individuales de forma concisa.

Destructuring de arrays

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

// Extraer en variables
const [primero, segundo, tercero] = colores;
console.log(primero); // "rojo"
console.log(segundo); // "verde"
console.log(tercero); // "azul"

// Ignorar elementos con comas
const [primer, , tercer] = colores;
console.log(primer); // "rojo"
console.log(tercer); // "azul"

// Valores por defecto
const [a, b, c, d = 'sin color'] = colores;
console.log(d); // "sin color"

// Intercambiar variables
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1

Destructuring de objetos

const persona = {
  nombre: 'Ana',
  edad: 28,
  ciudad: 'Madrid'
};

// Extraer por nombre de propiedad
const { nombre, edad } = persona;
console.log(nombre); // "Ana"
console.log(edad);   // 28

// Renombrar variables
const { nombre: nombrePersona, ciudad: ciudadPersona } = persona;
console.log(nombrePersona);  // "Ana"
console.log(ciudadPersona);  // "Madrid"

// Valores por defecto
const { nombre, pais = 'España' } = persona;
console.log(pais); // "España"

Destructuring anidado

const usuario = {
  id: 1,
  perfil: {
    nombre: 'Luis',
    direccion: {
      ciudad: 'Barcelona',
      codigoPostal: '08001'
    }
  }
};

const { perfil: { nombre, direccion: { ciudad } } } = usuario;
console.log(nombre);  // "Luis"
console.log(ciudad);  // "Barcelona"

💻 Ejemplo

// Destructuring en parámetros de función
function mostrarInfo({ nombre, edad, ciudad = 'Desconocida' }) {
  console.log(`${nombre} (${edad}) - ${ciudad}`);
}

const persona1 = { nombre: 'Ana', edad: 28, ciudad: 'Madrid' };
const persona2 = { nombre: 'Luis', edad: 35 };

mostrarInfo(persona1); // "Ana (28) - Madrid"
mostrarInfo(persona2); // "Luis (35) - Desconocida"

// Destructuring con arrays multidimensionales
const coordenadas = [
  [1, 2],
  [3, 4],
  [5, 6]
];

for (const [x, y] of coordenadas) {
  console.log(`x: ${x}, y: ${y}`);
}
// x: 1, y: 2
// x: 3, y: 4
// x: 5, y: 6

⚠️ Nota

Si intentas desestructurar undefined o null, obtienes un error. Siempre pon valores por defecto si no estás seguro:

function safeDestruct(obj = {}) {
  const { nombre = 'Anónimo' } = obj;
  return nombre;
}

console.log(safeDestruct()); // "Anónimo"

Para arrays, si intentas desestructurar algo que no es iterable, también da error.

🎯 Tip

El destructuring hace tu código más legible y menos repetitivo. Es especialmente útil para:

• Parámetros de funciones con muchas opciones
• Intercambiar variables sin temporal
• Extraer datos específicos de APIs (JSON)
• Importar módulos específicos: const { map, filter } = require('lodash');

📝 Ejercicio

Escribe una función obtenerCoordenadas que reciba un string “x,y” y devuelva un objeto con propiedades x e y como números. Usa destructuring.

function obtenerCoordenadas(str) {
  // "3,7" → { x: 3, y: 7 }
  // Usa split y destructuring
}

console.log(obtenerCoordenadas("3,7"));  // { x: 3, y: 7 }
console.log(obtenerCoordenadas("10,-2")); // { x: 10, y: -2 }