Object Destructuring

You have already used object destructuring in this course. The Expense constructor accepts { id, description, amount, category, date } as its parameter — that is destructuring. This lesson explains exactly how it works.

The basic syntax

Without destructuring, pulling multiple properties from an object requires multiple lines:

const expense = { id: 1, description: 'Coffee', amount: 4.50, category: 'Food' };

const id = expense.id;
const description = expense.description;
const amount = expense.amount;

With destructuring, you extract all three in a single statement:

const { id, description, amount } = expense;

console.log(id);          // 1
console.log(description); // 'Coffee'
console.log(amount);      // 4.50

The left side mirrors the shape of the object. JavaScript finds each named property and assigns it to a variable with that name.

Extracting only what you need

You do not have to extract every property. Pull only what the current context needs:

const { description, amount } = expense;
// id and category are ignored — that is fine

Destructuring in function parameters

This is the most common place you will see destructuring in BudgetBuddy — a function accepts an object and immediately destructures it:

function formatExpense({ description, amount, category }) {
  return `${description} (${category}): $${amount.toFixed(2)}`;
}

formatExpense({ description: 'Coffee', amount: 4.50, category: 'Food' });
// 'Coffee (Food): $4.50'

This is identical to the Expense constructor pattern. The function does not receive a named expense object — it receives the individual fields directly, making the body cleaner.

Destructuring in array methods

When iterating over objects with map, filter, or forEach, destructuring in the callback parameter makes the intent clear:

const expenses = [
  { id: 1, description: 'Coffee', amount: 4.50, category: 'Food' },
  { id: 2, description: 'Bus pass', amount: 30.00, category: 'Transport' },
];

// Without destructuring
const amounts = expenses.map(expense => expense.amount);

// With destructuring — clearer when using multiple fields
const summaries = expenses.map(({ description, amount }) =>
  `${description}: $${amount.toFixed(2)}`
);

When the callback only uses one or two fields, destructuring removes the noise of repeatedly writing expense.field.

Nested destructuring

You can destructure nested objects, though deep nesting gets hard to read quickly:

const user = {
  name: 'Alex',
  address: {
    city: 'Portland',
    state: 'OR',
  },
};

const { name, address: { city } } = user;
console.log(name); // 'Alex'
console.log(city); // 'Portland'

address is not assigned to a variable here — only city is. If you need both address as a whole and city individually, use two separate statements.

Destructuring with computed property names

You can destructure a property whose name is a variable using bracket notation:

const key = 'amount';
const { [key]: value } = expense;
console.log(value); // 4.50

This is rarely needed but useful when the property name is dynamic.

Exercise

Using the full BudgetBuddy expenses array:

const expenses = [
  { id: 1, description: 'Coffee', amount: 4.50, category: 'Food', date: '2024-01-15' },
  { id: 2, description: 'Bus pass', amount: 30.00, category: 'Transport', date: '2024-01-14' },
  { id: 3, description: 'Lunch', amount: 12.75, category: 'Food', date: '2024-01-15' },
];

1. Destructure description, amount, and category from the first expense.
2. Write a function summarize({ description, amount }) that returns a formatted string. Call it with each expense.
3. Use destructuring in an expenses.map(...) callback to return { description, amount } objects — dropping id, category, and date.
4. Destructure only the date from the third expense and log it.

Recap

• const { name1, name2 } = object extracts properties into variables with matching names.
• Extract only the properties you need — unused ones are simply not destructured.
• Destructuring in function parameters is especially clean — the function body works with named values directly.
• Use it in array method callbacks when you need multiple fields from each item.