Object Destructuring in JavaScript
Object destructuring is an ES6 feature that allows you to extract values from objects and assign them to variables in a concise way.
- Simplifies code by avoiding repetitive property access (
obj.prop) - Improves readability
- Enables default values, renaming, and nested extraction
Basic Object Destructuring
Instead of accessing properties individually, destructuring allows you to extract multiple properties in one statement.
const person = { name: "Alice", age: 25, country: "India" };
// Traditional way
const name1 = person.name;
const age1 = person.age;
// Using destructuring
const { name, age } = person;
console.log(name); // "Alice"
console.log(age); // 25
Assigning Default Values
You can assign default values to variables in case the property is undefined.
const person = { name: "Bob" };
const { name, age = 30 } = person;
console.log(name); // "Bob"
console.log(age); // 30 (default value)
Renaming Variables
Destructuring allows you to assign properties to different variable names.
const person = { name: "Alice", age: 25 };
const { name: fullName, age: years } = person;
console.log(fullName); // "Alice"
console.log(years); // 25
Nested Object Destructuring
You can destructure nested objects in a single statement.
const person = {
name: "Alice",
address: {
city: "Mumbai",
country: "India"
}
};
const { name, address: { city, country } } = person;
console.log(name); // "Alice"
console.log(city); // "Mumbai"
console.log(country); // "India"
Destructuring in Function Parameters
Object destructuring can be used directly in function parameters for cleaner code.
const person = { name: "Bob", age: 40 };
function greet({ name, age }) {
console.log(`Hello, I'm ${name} and I'm ${age} years old`);
}
greet(person); // "Hello, I'm Bob and I'm 40 years old"
Rest Operator with Destructuring
The rest operator (...) can be used to collect remaining properties.
const person = { name: "Alice", age: 25, country: "India" };
const { name, ...rest } = person;
console.log(name); // "Alice"
console.log(rest); // { age: 25, country: "India" }
Practical Use Cases
Extracting API response data:
const user = {
id: 1,
username: "john_doe",
profile: { email: "[email protected]" }
};
const { username, profile: { email } } = user;
console.log(username, email); // "john_doe", "[email protected]"
Swapping variables (with array destructuring combined):
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1
Function parameters with default values:
function createUser({ name = "Anonymous", age = 0 } = {}) {
console.log(name, age);
}
createUser({ name: "Alice" }); // "Alice", 0
createUser(); // "Anonymous", 0
Summary Table
| Feature | Example | Notes |
|---|---|---|
| Basic Destructuring | const { name, age } = person; | Extract properties into variables |
| Default Values | const { age = 30 } = person; | Assign defaults if property is missing |
| Renaming Variables | const { name: fullName } = person; | Use different variable name |
| Nested Destructuring | const { address: { city } } = person; | Extract nested properties |
| Function Parameter Destructuring | function greet({ name }) {} | Simplifies parameter handling |
| Rest Operator | const { name, ...rest } = person; | Collect remaining properties |