Destructuring

Unpack in one move

Destructuring is JavaScript syntax for unpacking values from arrays and objects directly into variables. Instead of opening a value, reading one piece, then writing another line for the next piece, you write a pattern that has the same shape as the data you want.

This lesson uses the curriculum summary for this topic: unpack arrays and objects into variables. You will also see defaults, renaming, nesting, parameters, swaps, and the exact evaluation rules professionals rely on.

Array destructuring unpacks by position, like seats in a row. The first pattern slot receives the first iterated value, the second slot receives the second, and so on. Arrays are the common case, but the later Iteration protocols lesson will explain why any iterable can work.

const scores = [98, 87, 91];
const [first, second] = scores;
const [winner, , bronze = 0] = scores;
console.log(first, second, bronze); // 98 87 91

The empty space between two commas skips the second value. A default, like bronze = 0, only fills in when the value for that slot is undefined. The ...tail rest pattern gathers remaining values; that gets a full treatment in the next lesson, Spread & rest.

Object destructuring unpacks by property name. The order of properties in the object literal is not the point; the pattern asks for names. It is like picking your own mail out of mailboxes labeled by recipient.

const user = { id: 7, name: "Mina", role: "admin" };
const { name, role } = user;
console.log(name, role); // Mina admin

If the variable should have a different name, put the property name before a colon and the new variable name after it: { name: fullName }. The colon does not mean “type”; it means “read this property into that variable.”

Defaults are your spare items: if the box is missing this item, use the spare. Renaming is putting an item into a drawer with a different label. Try both in the lab.

1const user = {2  name: "Ada Lovelace",3  age: 36,4  address: { city: "Pune" }5};6const scores = [98, 87, 91, 76];7 8// Choose one pattern in the lab controls.9 10const { name, age } = user;

A pattern can go inside another pattern. That lets you reach into objects inside objects, arrays inside arrays, or the mix you often get from an API response.

const user = { address: { city: "Pune" } };
const { address: { city } } = user;
console.log(city);
console.log(address);

Line 2 creates city. It does not create a variable named address; address: is the path to walk through. Reading address on line 4 throws a ReferenceError because no such variable was declared.

const response = { data: [{ id: 1, title: "Destructuring" }] };
const { data: [firstArticle] } = response;
const { id, title } = firstArticle;

Function parameters can be patterns too. This is common for options objects and React-style props: the caller sends one object, and the function names the pieces it needs.

function greet({ name, greeting = "Hello" } = {}) {
  return `${greeting}, ${name ?? "friend"}`;
}
console.log(greet({ name: "Mina" }));
console.log(greet());

The = after the parameter is important. Without it, calling greet() would try to destructure undefined and throw a TypeError. The inner greeting = "Hello" is a different default: it fills one property after the outer object exists.

Assignment destructuring can write into existing variables. The classic trick is swapping two values without making a temporary variable yourself.

1let left = "tea";Run2let right = "coffee";3[left, right] = [right, left];4console.log(left, right);

Destructuring is short, but it is not magic. JavaScript evaluates the right side first, then walks the pattern from left to right. Defaults run only when the value being assigned is undefined, and they are lazy: a default expression is not evaluated unless it is needed.

1let calls = 0;Run2function spare() {3  calls = calls + 1;4  return "spare";5}6const source = { item: undefined };7const { item = spare() } = source;8console.log(item, calls);

Destructuring from null or undefined throws a TypeError for object patterns because there is no object to read. Array patterns need an iterable; null and undefined are not iterable either.

Where you will use this

Destructuring makes data-heavy code easier to scan. You will use it when reading settings, unpacking responses, naming entries from Object.entries, returning multiple values, and accepting option objects.

const totals = { apples: 3, oranges: 2 };
for (const [fruit, count] of Object.entries(totals)) {
  console.log(fruit + ": " + count);
}

let x;
let y;
const point = { x: 4, y: 9 };
({ x, y } = point);
console.log(x, y);

Common misconceptions

• “Defaults replace any falsy value.” They replace only undefined, not null, 0, false, or an empty string.
• “Renaming creates both names.” { name: fullName } creates fullName, not name.
• “Nested paths become variables.” { address: { city } } creates city; address is only the path.
• “Object assignment can start a statement by itself.” Existing variables need ({ x } = point);.
• “Array destructuring is only for arrays.” It works with iterables. Arrays are just the friendly starting point.

Key takeaways

• Array patterns unpack by iteration position; object patterns unpack by property name.
• Defaults run only for undefined and only when needed.
• Renaming changes the variable name, not the source property.
• Nested patterns walk through data; path labels are not automatically variables.
• Use = for parameter destructuring that should tolerate missing arguments.

Destructuring is pattern matching for assignment: the left side describes the pieces JavaScript should pull from the right side.

Up next: Spread & rest.