Array Destructuring

Object destructuring matches by name. Array destructuring matches by position — the first variable gets the first element, the second gets the second, and so on.

The basic syntax

const categories = ['Food', 'Transport', 'Health'];

const [first, second, third] = categories;
console.log(first);  // 'Food'
console.log(second); // 'Transport'
console.log(third);  // 'Health'

The syntax mirrors how arrays look: square brackets on the left, same order as the array on the right.

Skipping elements

Leave a blank (just a comma) to skip an element:

const [, second, , fourth] = ['a', 'b', 'c', 'd'];
console.log(second); // 'b'
console.log(fourth); // 'd'

Skipping more than one or two elements becomes hard to read — consider using index notation or at() for clearer access in those cases.

Swapping variables

One of the most elegant uses of array destructuring is swapping two variables without a temporary:

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

The right side creates a new temporary array, and destructuring immediately unpacks it.

Destructuring function return values

When a function returns an array of two or more related values, array destructuring makes the call site clean:

function getMinMax(expenses) {
  const amounts = expenses.map(e => e.amount).sort((a, b) => a - b);
  return [amounts[0], amounts[amounts.length - 1]];
}

const [min, max] = getMinMax(expenses);
console.log(`Cheapest: $${min}, Most expensive: $${max}`);

This pattern is common in React hooks (const [state, setState] = useState(...)) and is something you will recognize when you encounter it.

Destructuring with rest

Capture the remaining elements in a new array with ...rest:

const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

This is the array equivalent of the rest parameter for function arguments (covered in lesson 05).

Nested array destructuring

const pairs = [[1, 'Coffee'], [2, 'Lunch']];
const [[id1, desc1], [id2, desc2]] = pairs;
console.log(id1, desc1); // 1 'Coffee'

Useful, but depth past one level is usually clearer with explicit index access.

When to use array vs object destructuring

Array destructuring	Object destructuring
Position matters, names are yours to choose	Names matter, they must match property keys
Function returns multiple related values	Function accepts or returns a named data shape
Short, positional tuples [x, y]	Rich objects with many fields

In BudgetBuddy, most destructuring is object destructuring — expense objects have many named fields and position is meaningless. Array destructuring appears primarily when calling functions that return [value, meta] pairs.

Exercise

const sortedExpenses = [
  { description: 'Coffee', amount: 4.50 },
  { description: 'Lunch', amount: 12.75 },
  { description: 'Dinner out', amount: 38.20 },
];

1. Use array destructuring to get the cheapest and most expensive expense (first and last).
2. Write a function partition(expenses, threshold) that returns [belowThreshold, atOrAbove] — two arrays. Destructure the return value at the call site.
3. Use [head, ...rest] to separate the first expense from the remaining ones.
4. Swap the description values of two expense objects using array destructuring.

Recap

• const [a, b, c] = array extracts elements by position.
• Skip elements with empty slots: const [, second] = array.
• Swap variables cleanly: [a, b] = [b, a].
• Destructure function return values to name each returned item.
• [first, ...rest] separates the head from the tail.