Desestructuración — extraer valores de objetos y arrays

¿Quieres usar solo el número de pedido y el total de un objeto de pedido? Escribir order.orderId y order.total una y otra vez alarga el código. Cuantos más campos necesites, más líneas empiezan con el mismo order..

Este artículo trata la desestructuración, que extrae de una vez a variables solo los valores que necesitas, según los nombres de clave o las posiciones.

Extraer solo lo que necesitas, por nombre — desestructuración de un objeto

Si necesitas el número de pedido, el total y el nombre del cliente de un mismo objeto de pedido, acabarías escribiendo una línea como const orderId = order.orderId; por cada campo. Al repetir tantas veces el mismo order., cuesta distinguir de un vistazo qué valor quieres usar en cada línea.

La desestructuración (sintaxis que extrae de una vez varios valores a variables, según los nombres de clave de un objeto o las posiciones de un array) te permite escribir eso en una línea: const { orderId, total } = order;. Los nombres de clave escritos dentro de las {} de la izquierda se convierten directamente en los nombres de variable, y cada uno toma el valor de la propiedad que se llama igual.

Para poner un valor por defecto cuando falta una clave, añádelo con =, así: const { shippingFee = 500 } = order;. Para asignarlo a otro nombre, escribe const { orderId: id } = order;.

De un objeto anidado puedes extraer un valor directamente con la forma const { customer: { name } } = order;. Lo que va después de : cambia de significado según sea un nombre de variable o unas llaves.

customer: name asigna el valor de customer a la variable name, mientras que customer: { name } extrae name de dentro de customer. Esta última no crea ninguna variable llamada customer.

const order = {
  orderId: "ORD-1268",
  total: 12800,
  customer: { name: "Maya Chen", email: "maya@example.com" },
};

// Los nombres de clave se convierten directamente en los nombres de variable
const { orderId, total } = order;
console.log(orderId);          // ORD-1268
console.log(total);            // 12800

// Añade con = un valor por defecto para una clave que no existe
const { couponCode = "ninguno" } = order;
console.log(couponCode);       // ninguno

// Escribe otro nombre de variable después de :
const { total: totalAmount } = order;
console.log(totalAmount);      // 12800

// Extrae un valor directamente de dentro de un objeto anidado
const { customer: { email } } = order;
console.log(email);            // maya@example.com

Extrae de un objeto de pedido solo los valores que necesitas mostrar, línea a línea. order ya está declarado.

① Extrae a la vez el número de pedido y el total, y muéstralos con el formato "ORD-3120 / 8600 dólares".

② Extrae el nombre del cliente directamente de dentro del objeto anidado y muéstralo.

③ Extrae el coste de envío con un valor por defecto de 500 y muéstralo. order no tiene ese campo.

④ Asigna el número de pedido a una variable llamada id y muéstralo.

(Si se ejecuta correctamente, aparecerá una explicación.)

Asignar por orden — desestructuración de arrays y rest

Los arrays no tienen nombres de clave, de modo que el emparejamiento se hace por la posición de cada elemento. ¿Quieres tratar por separado el primer artículo de un carrito y el segundo? En vez de escribir cart[0] y cart[1], puedes poner varios nombres de variable seguidos y asignarles todos los valores de una vez.

La sintaxis es const [firstItem, secondItem] = cart;. Los valores de los índices 0 y 1 se asignan de izquierda a derecha. Para saltarte una posición, basta con poner una coma: const [, secondItem] = cart;.

En una posición sin elemento puedes añadir un valor por defecto con = "(ninguno)". Ten en cuenta que el valor por defecto solo se aplica cuando el valor de esa posición es undefined.

Si ahí hay un null, se asigna null tal cual. Para sustituir también null por un valor por defecto, usa ??, del artículo anterior.

Para quedarte de una vez con todo lo sobrante, usa la sintaxis rest (añadir ... en el lado izquierdo de un patrón de desestructuración para agrupar en un solo array u objeto todo lo que no se haya asignado ya).

Si escribes const [firstItem, ...restItems] = cart;, restItems recibe como array todo lo que va del segundo elemento en adelante. ... solo puede ir justo al final del lado izquierdo.

const cart = ["Ratón inalámbrico", "Hub USB-C", "Brazo para monitor"];

// La asignación va de izquierda a derecha
const [firstItem, secondItem] = cart;
console.log(firstItem);            // Ratón inalámbrico
console.log(secondItem);           // Hub USB-C

// Una coma suelta se salta esa posición
const [, , thirdItem] = cart;
console.log(thirdItem);            // Brazo para monitor

// ... agrupa todo lo sobrante en un array (con otro nombre, porque el primero ya se usó arriba)
const [headItem, ...tailItems] = cart;
console.log(tailItems.join(", "));  // Hub USB-C, Brazo para monitor

// Los objetos también pueden agrupar el resto
const product = { name: "Hub USB-C", price: 2480, stock: 12 };
const { name, ...spec } = product;
console.log(Object.keys(spec).join(", "));  // price, stock

Divide el contenido de un carrito en el primer artículo y todo lo demás. cart ya está declarado.

① Divídelo en el primer artículo y el resto, agrupado en un array, y muestra el primer artículo.

② Muestra cuántos artículos hay en "el resto".

③ Extrae solo el segundo artículo con la sintaxis que se salta el primero, y muéstralo.

④ Extrae el quinto artículo saltándote los cuatro primeros con comas y añadiendo el valor por defecto "(ninguno)", y muéstralo.

Divide un objeto de producto en el campo que se usa para mostrar y todo lo demás. product ya está declarado.

① Extrae solo el nombre del producto y agrupa el resto en otro objeto; después muestra el nombre.

② Muestra las claves del objeto que agrupa el resto, unidas con ", ".

③ Extrae las existencias con un valor por defecto de 0 para cuando falte la clave, y muéstralas.