JavaScript Destructuring

In the previous lesson, we learned how to add functions to objects as methods. Now let’s learn destructuring, a shortcut for pulling values out of objects and arrays into their own variables.

📦 What is Destructuring?

Destructuring is a way to unpack values from an object or array and store them in separate variables in one line. Without it, you read each value one at a time and assign it by hand.

Here is the long way, where every value is copied out on its own line:

const user = { name: "Alex", age: 30 };

const name = user.name;
const age = user.age;

console.log(name); // "Alex"
console.log(age); // 30

Let’s walk through what this code does:

• const user = { name: "Alex", age: 30 } creates an object with two properties.
• const name = user.name reads the name property and stores it in a separate variable.
• const age = user.age does the same thing for age.
• Each value needs its own line, so two properties means two assignments.

With destructuring, you do the same thing in a single line:

const user = { name: "Alex", age: 30 };

const { name, age } = user;

console.log(name); // "Alex"
console.log(age); // 30

Let’s break down the destructuring line:

• const { name, age } = user pulls both properties out at once.
• The curly braces on the left mean “unpack these properties from the object on the right.”
• name becomes a variable holding "Alex", and age becomes a variable holding 30.
• Two assignments collapse into one line.

The variable names inside the curly braces must match the property names on the object. JavaScript looks up each property by name and assigns it to a variable of the same name.

🏷️ Renaming While Destructuring

Sometimes the property name is not the variable name you want. You can rename a value as you pull it out by writing the new name after a colon.

const user = { name: "Alex", age: 30 };

const { name: userName } = user;

console.log(userName); // "Alex"

Let’s see how the rename works:

• const { name: userName } = user reads the name property but stores it under a new name.
• The part before the colon, name, is the property to look up on the object.
• The part after the colon, userName, is the variable that actually gets created.
• The variable name is never created, so only userName holds the value.

Here name is the property to read from the object, and userName is the new variable that holds it. The variable name is never created.

🛟 Default Values

If a property does not exist on the object, the destructured variable is undefined. You can give it a fallback by writing = and a default value.

const user = { name: "Alex" };

const { role = "guest" } = user;

console.log(role); // "guest"  → the object has no role, so the default is used

Let’s trace what happens here:

• const user = { name: "Alex" } creates an object that has no role property.
• const { role = "guest" } = user tries to read role, but it is missing.
• Because role is missing, the fallback "guest" is used instead of undefined.
• console.log(role) prints "guest".

The default is only used when the property is missing. If the object has a role, that real value wins.

🔢 Array Destructuring

Arrays can be destructured too, but they use square brackets [ ] instead of curly braces. Values are matched by position, not by name.

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

const [first, second] = colors;

console.log(first); // "red"
console.log(second); // "green"

Let’s match each variable to its position:

• const colors = ["red", "green", "blue"] creates an array with three items.
• const [first, second] = colors pulls items out by position using square brackets.
• first takes the item at position 0, which is "red".
• second takes the item at position 1, which is "green".

The first variable gets the first item, the second variable gets the second item, and so on. You can skip items by leaving a gap with a comma.

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

const [, , third] = colors;

console.log(third); // "blue"

Let’s see how skipping works:

• The two empty slots before third stand for the first and second items, which we choose to ignore.
• Each comma moves the position forward by one, so third lands on the item at position 2.
• third ends up holding "blue".

🧰 Destructuring Function Parameters

A common use is pulling values straight out of an object passed to a function. Instead of reading options.width and options.height inside the function, you destructure them in the parameter list.

Here is a function written the long way, reading each value from the object:

function buildBox(options) {
  return `${options.width} x ${options.height}`;
}

console.log(buildBox({ width: 200, height: 100 })); // "200 x 100"

Let’s walk through this version:

• function buildBox(options) takes the whole object as a single options parameter.
• Inside the function, options.width and options.height reach into that object for each value.
• The call passes { width: 200, height: 100 }, so the result is "200 x 100".

Now the same function with destructuring in the parameter, which reads cleaner:

function buildBox({ width, height }) {
  return `${width} x ${height}`;
}

console.log(buildBox({ width: 200, height: 100 })); // "200 x 100"

Let’s see what the destructured parameter buys us:

• function buildBox({ width, height }) unpacks width and height right in the parameter list.
• Inside the function we use width and height directly, with no options. prefix.
• The call still passes the same object, and the result is still "200 x 100".

You can even add default values right in the parameter, so missing options fall back gracefully.

function buildBox({ width = 100, height = 100 }) {
  return `${width} x ${height}`;
}

console.log(buildBox({ width: 200 })); // "200 x 100"

Let’s trace the defaults in action:

• { width = 100, height = 100 } gives each parameter a fallback for when it is missing.
• The call passes only { width: 200 }, so width becomes 200.
• height is missing from the call, so it falls back to its default of 100.
• The result is "200 x 100".

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ Destructuring unpacks values from objects and arrays into variables in one line
• ✅ Object destructuring uses { } and matches by property name
• ✅ You can rename a value with const { name: userName } = user
• ✅ You can set a fallback with const { role = "guest" } = user
• ✅ Array destructuring uses [ ] and matches by position
• ✅ Destructuring works great in function parameters

🚀 What’s Next?

Now that you can pull values out of objects and arrays, let’s learn how to spread them back out. Let’s continue to the Spread Operator.