Desestructuración
La desestructuración asigna propiedades de un object o elementos de un array a variables mediante un patrón. No modifica el object ni el array original. Usaremos este pedido:
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
Desestructuración básica de object
Los nombres entre {} seleccionan las propiedades del mismo nombre en el valor de la derecha y crean dos constantes.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest, drink } = order;
console.log(guest);
console.log(drink);
Se muestra lida y después tea. Es una forma breve de leer order.guest y order.drink; ninguna propiedad desaparece de order.
Cambiar el nombre y dar un valor predeterminado
El patrón property: variable elige otro nombre de variable. El valor tras = se usa únicamente si la propiedad vale undefined.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest: customer, size = "regular" } = order;
console.log(customer);
console.log(size);
customer recibe lida. Como no existe size, esa variable recibe regular. El alias no crea una variable llamada guest.
Leer una propiedad anidada
Un patrón anidado sigue la forma del object. La parte { city } lee city desde order.address.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { address: { city } } = order;
console.log(city);
El resultado es rasht y no se crea una variable address. Si address falta o es undefined, intentar obtener city puede lanzar un error. No se puede poner optional chaining dentro de este patrón; comprueba o normaliza el valor antes.
Desestructuración de array
Los corchetes [] asignan por posición. La primera variable recibe el índice 0 y la segunda, el índice 1.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const [firstExtra, secondExtra] = order.extras;
console.log(firstExtra);
console.log(secondExtra);
La salida es mint y luego lemon. Puedes elegir los nombres, pero la posición determina el valor. order.extras conserva ambos elementos.
Desestructurar un parámetro
Una función puede extraer los datos del object directamente en su lista de parámetros. Esta función solo necesita guest y drink.
function label({ guest, drink }) {
return guest + " ordered " + drink;
}
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
console.log(label(order));
La llamada devuelve lida ordered tea. El patrón se aplica al llamar a la función; pasar null o undefined falla si la función no contempla esos valores.
Demostración completa
La página combina la desestructuración de object, array y parámetros para mostrar un resumen del pedido.
<!doctype html>
<html lang="es">
<head><meta charset="utf-8"><title>Desestructuración en JavaScript</title></head>
<body>
<p id="result"></p>
<script>
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
function summary({ guest, drink, extras }) {
const [firstExtra] = extras;
return guest + " / " + drink + " / " + firstExtra;
}
document.getElementById("result").textContent = summary(order);
</script>
</body>
</html>
El resultado visible es exactamente lida / tea / mint. La función solo lee los datos necesarios y no cambia order.
include_try
Renombra drink como beverage y añade un valor predeterminado para la propiedad ausente table. Después prueba un pedido sin address y compruébala antes del patrón anidado.
mistakes
No confundas la propiedad con la variable renombrada, no esperes que un valor predeterminado sustituya null ni supongas que siempre existe el object anidado. {} corresponde a propiedades y [] a posiciones; la fuente no cambia. Rest y spread se verán en spread-rest.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior