Platform under construction

Arrays & Collections

Advanced

Destructuring

Destructuring pulls values out of arrays or objects into named variables with compact syntax.

const colors = ["red", "green", "blue"];
const [primary, secondary] = colors;

console.log(primary, secondary);

Arrays & Collections

Destructuring turns positions and properties into variables.

Array destructuring uses position. The first variable gets the first item, the second variable gets the second item, and so on.

Rest syntax collects remaining values into a new array. Default values can fill in missing positions.

Destructuring is useful for function returns, entries loops, swapping variables and handling structured data without repetitive index access.

Array destructuring

Pulls values by position.

Rest element

Collects remaining values into an array.

Default value

Used when a position is missing or undefined.

Swap

Two variables can be swapped without a temporary variable.

Examples

Array code should reveal whether it reads, mutates, transforms or summarizes.

Readable entry destructuring

for (const [key, value] of Object.entries(settings)) {
  console.log(`${key}: ${value}`);
}

Magic indexes everywhere

const row = ["HTML", 94, true];

console.log(row[0], row[1], row[2]);

// The meaning of each position is easy to forget.

Code patterns

Reusable examples for quick reference.

These are the patterns developers search for constantly: reading items, copying arrays, choosing map/filter/reduce, sorting with a comparator, destructuring and using Set or Map.

Basic destructuring

Read positions into names.

const colors = ["red", "green"];
const [primary, secondary] = colors;

Skip positions

Use commas to ignore items.

const values = ["a", "b", "c"];
const [first, , third] = values;

Rest values

Collect the remaining items.

const values = [1, 2, 3, 4];
const [first, ...rest] = values;

Entries loop

Destructure index and value.

for (const [index, value] of values.entries()) {
  console.log(index, value);
}

Rules that matter

The right collection method makes the intent obvious.

Arrays and collections are not just storage. They describe whether the code is selecting, transforming, grouping, counting, sorting or enforcing uniqueness.

Use array destructuring for known positions

It is great for pairs and small tuples.

Use rest for remaining values

Rest collects the unused tail.

Use defaults for optional positions

Defaults make missing values explicit.

Avoid destructuring huge arrays

Too many positions becomes unreadable.

Prefer objects for named data

If positions need explanation, an object may be better.

Use entries with destructuring

It makes key-value loops much clearer.

Production thinking

Collection choices decide how readable data flow becomes.

Why does this matter?

Destructuring removes repetitive index access and gives values names at the moment they are read.

Accessibility

Clear variable names make rendered labels and state updates easier to audit.

Production note

Production destructuring should stay small and obvious. Deep clever destructuring is hard to maintain.

SEO note

Destructured content values should have clear names before being rendered into page text.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Remove the status value and watch the default apply.
Use rest to collect extra row values.
Rewrite the example with an object instead of an array.

Practice assignment

Do this before moving to the next topic.

Destructure the first two values from an array.
Use a default value.
Use rest syntax.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Destructuring.