¿Qué es el destructuring y cómo se usa con arreglos y objetos?

El destructuring es una sintaxis para extraer valores de arreglos u objetos y asignarlos a variables en una sola línea. Con arreglos se basa en la posición; con objetos, en el nombre de la propiedad.

En lugar de acceder a los valores uno por uno, el destructuring te permite "desempacar" varios a la vez.

• Con arreglos: extraes por posición.
• Con objetos: extraes por nombre de propiedad.

También puedes definir valores por defecto (que se usan cuando el valor no existe) y renombrar variables al desempacar objetos.

// Destructuring de arreglos (por posición)
const colores = ["rojo", "verde", "azul"];
const [primero, segundo] = colores;
console.log(primero); // "rojo"
console.log(segundo); // "verde"

// Saltar posiciones con una coma
const [, , tercero] = colores;
console.log(tercero); // "azul"

// Destructuring de objetos (por nombre)
const usuario = { nombre: "Mike", edad: 30 };
const { nombre, edad } = usuario;
console.log(nombre, edad); // "Mike" 30

// Valores por defecto
const { activo = true } = usuario;
console.log(activo); // true (no existía, usa el valor por defecto)

// Renombrar variables
const { nombre: nombreUsuario } = usuario;
console.log(nombreUsuario); // "Mike"

// Muy útil en parámetros de funciones
function saludar({ nombre, edad }) {
  console.log(`${nombre} tiene ${edad} años`);
}
saludar(usuario); // "Mike tiene 30 años"

• Confundir lo que importa: con arreglos importa la posición, con objetos importa el nombre exacto de la propiedad.
• Intentar hacer destructuring desde null o undefined, lo que lanza un error. Por ejemplo, const { x } = null lanza un error.

"El destructuring me permite sacar valores de arreglos u objetos en una sola línea. Con arreglos extraigo por posición, y con objetos por nombre de propiedad. También puedo definir valores por defecto y renombrar variables. Lo uso mucho en parámetros de funciones para recibir un objeto de opciones de forma limpia, en lugar de acceder a cada propiedad por separado."