Default Values and Renaming

Two features of destructuring make it more powerful in practice: default values when a property might be missing, and renaming when the property name conflicts with an existing variable or is not descriptive enough.

Default values in destructuring

If a property does not exist on the object (or is undefined), destructuring assigns undefined to the variable. Add a default value with = to provide a fallback:

const expense = { description: 'Coffee', amount: 4.50 };

const { description, category = 'Uncategorized' } = expense;
console.log(category); // 'Uncategorized' — property was missing, default kicks in

Defaults only apply when the value is undefined — not when it is null, 0, or '':

const { amount = 10 } = { amount: 0 };
console.log(amount); // 0 — 0 is not undefined, so the default does not apply

Defaults in function parameters

You saw defaults in the Expense constructor:

constructor({ category = 'Other', date = new Date().toISOString().split('T')[0] } = {}) {
  // ...
}

The = {} at the end of the parameter handles the case where the function is called with no argument at all — without it, destructuring undefined would throw an error.

Renaming on destructure

Use : to assign a property to a differently-named variable:

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

const { id: expenseId, description: name } = expense;
console.log(expenseId); // 1
console.log(name);      // 'Coffee'
// id and description are not declared — only expenseId and name

The syntax reads as: “take the id property and call it expenseId.”

Combining renaming and defaults

You can rename and provide a default in a single expression:

const { category: cat = 'Uncategorized' } = expense;
// Rename 'category' to 'cat', defaulting to 'Uncategorized' if missing

Read it as: “take the category property, call it cat, and use 'Uncategorized' if it is not there.”

Common use cases in BudgetBuddy

Handling API response shapes — the ExchangeRate-API returns data.rates. Destructuring with a rename and default keeps the code readable:

const { rates = {} } = apiResponse;
const { USD = 1, EUR = 0, GBP = 0 } = rates;

Merging objects safely — when you update an expense, you apply only the changed fields, defaulting everything else to the existing value:

function updateExpense(existing, changes) {
  const { description = existing.description, amount = existing.amount, category = existing.category } = changes;
  return { ...existing, description, amount, category };
}

Destructuring in for…of

Destructuring works in loop variable positions too:

const expenses = [
  { id: 1, description: 'Coffee', amount: 4.50 },
  { id: 2, description: 'Lunch', amount: 12.75 },
];

for (const { id, description } of expenses) {
  console.log(`${id}: ${description}`);
}
// 1: Coffee
// 2: Lunch

Exercise

Using the BudgetBuddy expenses data:

1. Destructure category from an expense that does not have it, providing 'Other' as the default.
2. Destructure id but rename it to expenseId. Confirm that id is not declared, only expenseId.
3. Write a function display({ description, amount: cost = 0 }) that uses both renaming and a default. Call it with an expense missing an amount.
4. Use for...of with destructuring to log ${date}: ${description} for each expense in the array.

Recap

• const { prop = default } = obj assigns the default if prop is undefined.
• Defaults only apply for undefined, not null, 0, or ''.
• const { prop: newName } = obj renames the variable — prop is not declared, only newName.
• Combine both: const { prop: newName = default } = obj.
• Works in function parameters, loop variable declarations, and everywhere else destructuring is valid.