CodeForge

JavaScript de Cero a Experto / Objetos

Destructuring: desempacar en una línea

Teoría20 min20 XP

gasto.nombre, gasto.valor, gasto.categoria... repetir el nombre del objeto se vuelve ruido rapidísimo. El destructuring (desestructuración) extrae propiedades de un objeto —o posiciones de un array— en variables sueltas, en una sola línea. Es de las sintaxis que más vas a leer en código moderno: React, por ejemplo, la usa en cada componente.

Desempacar la maleta

Destructuring de objetos

Las llaves a la IZQUIERDA de un = no crean un objeto: son el molde de desempaque. const { nombre, valor } = gasto significa "de gasto, sácame nombre y valor como variables". El orden no importa (se busca por etiqueta), y lo que no menciones simplemente no se extrae.

Destructuring de arrays

En los arrays no hay etiquetas: se desempaca por POSICIÓN, con corchetes.

En parámetros de función

Aquí es donde el destructuring brilla: una función que recibe un objeto puede desempacarlo directamente en su firma.

Escribes const { valor: precio } = gasto donde gasto tiene la propiedad valor con 18000. Después haces console.log(valor). ¿Qué pasa?

Mini-reto

En "Mi Bolsillo": toma el array gastos del último playground y, usando map con destructuring en el callback, genera frases tipo "Almuerzo costó 18000 (comida)". Luego desestructura el primer gasto renombrando valor a precio y dándole a moneda el default "COP".

Qué sigue

Desempacar resuelve la lectura. Pero ¿y para armar? Copiar un objeto, combinar dos, o "modificar" una propiedad SIN mutar el original — como te enseñaron los arrays inmutables del módulo 4. Para eso existe el operador spread, la próxima lección.