Three closely related, modern syntax tools that make JavaScript code considerably more compact – we already touched on them briefly in chapter 8 (rest parameters) and chapter 11 (spread when copying). Now let's look at all three in depth.

Array destructuring

const amounts = [2400, -850, -120];

const [first, second, third] = amounts;
console.log(first, second, third); // 2400 -850 -120

const [income, ...remainingAmounts] = amounts; // rest pattern: collects the REST into a new array
console.log(income);            // 2400
console.log(remainingAmounts);  // [-850, -120]

const [, secondSkipped] = amounts; // skip elements with an empty slot
console.log(secondSkipped); // -850

Object destructuring

const transaction = { description: 'February rent', amount: -850, category: 'Rent' };

const { description, amount } = transaction;
console.log(description, amount); // 'February rent' -850

Unlike arrays, ORDER doesn't matter for objects – what counts is the PROPERTY NAME. Two useful extra features:

const transaction = { description: 'February rent', amount: -850 };

// Renaming while destructuring:
const { amount: moneyAmount } = transaction;
console.log(moneyAmount); // -850 (NOT 'amount' - that name doesn't exist here)

// Default value if the property is missing:
const { note = 'No note' } = transaction;
console.log(note); // 'No note' - transaction.note doesn't exist, default kicks in

Destructuring directly in function parameters

An extremely common practical pattern – especially useful when a function receives an object with many fields but only needs a few:

function formatTransaction({ description, amount, category = 'Other' }) {
  return `${description} (${category}): ${amount} EUR`;
}

console.log(formatTransaction({ description: 'Movies', amount: -18 }));
// 'Movies (Other): -18 EUR'

Spread operator with arrays: copying and merging

const januaryAmounts = [2400, -850];
const februaryAmounts = [-60, -18];

const copy = [...januaryAmounts]; // shallow COPY, not a mutating alias
const allAmounts = [...januaryAmounts, ...februaryAmounts]; // merge

console.log(allAmounts); // [2400, -850, -60, -18]

Spread operator with objects: immutable updates

Since objects compare by reference (chapter 12), the spread operator is the standard way to produce an "updated copy" instead of mutating the original:

const transaction = { description: 'February rent', amount: -850, category: 'Rent' };

// New copy with a changed amount, everything else stays the same:
const corrected = { ...transaction, amount: -870 };

console.log(corrected);   // { description: 'February rent', amount: -870, category: 'Rent' }
console.log(transaction); // unchanged: { description: 'February rent', amount: -850, category: 'Rent' }

Practical example: safely updating a transaction

function updateTransaction(transaction, changes) {
  return { ...transaction, ...changes };
}

const original = { description: 'February rent', amount: -850, category: 'Rent' };
const updated = updateTransaction(original, { amount: -870 });

console.log(original); // { description: 'February rent', amount: -850, category: 'Rent' }
console.log(updated);  // { description: 'February rent', amount: -870, category: 'Rent' }