Lección 16 · 16 de 20

Desestructuración y spread · JavaScript

Saque valores de arrays y objetos con la desestructuración de JavaScript, y copie o combine datos con el operador spread (...).

JavaScript · Desestructuración y spread en DMarlon Studio: el código del ejemplo y su salida en la terminal

La desestructuración saca valores de un array y los guarda en variables de una vez. const [gold, silver, bronze, ...rest] = podium toma los tres primeros pilotos por orden y, con ...rest, mete los que quedan en otro array.

Con la misma idea se intercambian dos variables sin una auxiliar: [home, away] = [away, home] crea un array con los valores cambiados de sitio y lo desestructura en las mismas variables.

Con objetos se desestructura por nombre, no por posición: const { name, level } = player crea las variables name y level con esos valores. Si la propiedad no existe, se le puede dar un valor por defecto, como lives = 3.

La desestructuración también funciona en los parámetros de una función, ({ name, coins }) =>, y en un for...of: Object.entries() devuelve pares [clave, valor] y [item, qty] los separa.

El operador spread ... hace lo contrario: despliega un array o un objeto. [...weekA, ...weekB, 30] une dos arrays y añade un valor, Math.max(...scores) pasa cada número como un argumento y { ...player, level: 13 } copia el objeto cambiando algunas propiedades, sin tocar el original. Es el patrón con el que React actualiza su estado.

Código · main.js

// Array destructuring: take the values out by position.const podium = ["Lewis", "Max", "Charles", "Lando", "Oscar"];const [gold, silver, bronze, ...rest] = podium;console.log(`Gold: ${gold}, silver: ${silver}, bronze: ${bronze}`);console.log("The rest:", rest);// Swap two variables without a temporary one.let home = 2;let away = 3;[home, away] = [away, home];console.log("Swapped score:", home, "-", away);// Object destructuring: take the values out by name.const player = { name: "Nora", level: 12, coins: 340 };const { name, level, lives = 3 } = player; // lives gets a defaultconsole.log(`${name} is on level ${level} with ${lives} lives`);// Destructuring in parameters and in for...ofconst describe = ({ name, coins }) => `${name} has ${coins} coins`;console.log(describe(player));for (const [item, qty] of Object.entries({ swords: 2, potions: 5 })) {  console.log(`  ${item}: ${qty}`);}// Spread (...) unpacks arrays and objects to copy or combine them.const weekA = [12, 15];const weekB = [9, 20];const scores = [...weekA, ...weekB, 30];console.log("All scores:", scores, "| Best:", Math.max(...scores));const upgraded = { ...player, level: 13, coins: player.coins + 50 };console.log("Before:", player);console.log("After: ", upgraded);

Salida · node main.js

Gold: Lewis, silver: Max, bronze: Charles
The rest: [ 'Lando', 'Oscar' ]
Swapped score: 3 - 2
Nora is on level 12 with 3 lives
Nora has 340 coins
  swords: 2
  potions: 5
All scores: [ 12, 15, 9, 20, 30 ] | Best: 30
Before: { name: 'Nora', level: 12, coins: 340 }
After:  { name: 'Nora', level: 13, coins: 390 }

Para recordar

const [a, b] = array saca valores por posición.
const { x, y } = objeto saca valores por nombre.
...rest recoge lo que sobra.
[...a, ...b] y { ...obj, clave: valor } copian y combinan sin cambiar el original.

Ejercicio

Con desestructuración, guarde el primero y el cuarto del podio saltando los demás con comas (const [winner, , , fourth] = podium), y cree una copia de player con 100 monedas más y una propiedad nueva team.