Unpack Properties
Destructuring lets you pull properties into variables by name.
It reduces repeated object.property access.
JavaScript Tutorial
JavaScript Object Destructuring
Object destructuring lets you extract properties into variables in a concise way.
It makes code more readable by reducing repeated access.
Why We Need It
Destructuring is common in function parameters and API responses.
It helps you write cleaner and more expressive code.
Syntax
const { prop } = obj
const { prop: alias = defaultValue } = objBasic Example
1. Basic destructuring
const user = { name: "Ava", role: "admin" };
const { name, role } = user;
console.log(name, role);Pull properties into variables.
Real World Example
2. Rename
const user = { name: "Ava" };
const { name: fullName } = user;
console.log(fullName);Rename properties during destructuring.
Multiple Use Cases
Defaults and Renaming
You can rename variables and provide default values.
This is useful when data may be missing.
Nested Destructuring
Destructure nested objects carefully to avoid undefined errors.
Combine with defaults when needed.
More Examples
Comparison
Without
const name = user.name;
const role = user.role;With
const { name, role } = user;Common Mistakes and Fixes
Destructuring undefined
Provide defaults or check objects before destructuring.
Overusing nested patterns
Keep destructuring readable and shallow when possible.
Forgetting renames
Use name: alias syntax for clarity.
Interview Questions
How do you rename a destructured property?
Use const { prop: alias } = obj.
How do you set defaults?
Use = defaultValue in the pattern.
Why is destructuring useful?
It reduces repeated property access and improves readability.
Practice Problem
Practice: Destructure a user object to extract name and city.
const user = { name: "Ava", address: { city: "Delhi" } };
// TODO: destructure name and city
One Possible Solution
const user = { name: "Ava", address: { city: "Delhi" } };
const { name, address: { city } } = user;
console.log(name, city);Frequently Asked Questions
What is object destructuring?
It assigns properties to variables by name.
Can I rename properties?
Yes, use const { prop: alias } = obj.
How do I set defaults?
Use const { prop = defaultValue } = obj.
Try It Yourself
Try renaming and adding defaults.