JavaScript Object Destructuring
Extract values from objects easily
📦 What is Object Destructuring?
Object destructuring is a convenient way to extract properties from objects and assign them to variables in a single statement.
// Traditional way
const person = {name: "Alice", age: 25, city: "New York"};
const name = person.name;
const age = person.age;
// Destructuring way
const {name, age} = person;
console.log(name); // "Alice"
console.log(age); // 25
Output:
Alice
25
Destructuring Features
Quick Extraction
Extract multiple properties at once
const {name, age, city} = person;Rename Variables
Assign to different variable names
const {name: fullName} = person;Default Values
Set defaults for missing properties
const {name, country = "USA"} = person;Nested Objects
Destructure nested object properties
const {address: {street}} = person;🔹 Basic Object Destructuring
Extract properties from objects into variables:
const student = {
name: "Emma",
grade: "A",
subject: "Mathematics",
school: "Central High"
};
// Destructure multiple properties
const {name, grade, subject} = student;
console.log(name); // "Emma"
console.log(grade); // "A"
console.log(subject); // "Mathematics"
// Destructure remaining properties
const {school} = student;
console.log(school); // "Central High"Output:
Emma
A
Mathematics
Central High
🔹 Renaming Variables
Assign object properties to variables with different names:
const product = {
name: "Laptop",
price: 999,
category: "Electronics",
inStock: true
};
// Rename variables during destructuring
const {
name: productName,
price: cost,
category: type,
inStock: available
} = product;
console.log(productName); // "Laptop"
console.log(cost); // 999
console.log(type); // "Electronics"
console.log(available); // trueOutput:
Laptop
999
Electronics
true
🔹 Default Values
Provide default values for properties that might not exist:
const user = {
username: "john_doe",
email: "[email protected]"
// Note: no 'role' or 'isActive' properties
};
// Destructure with default values
const {
username,
email,
role = "user", // Default value
isActive = true, // Default value
country = "Unknown" // Default value
} = user;
console.log(username); // "john_doe"
console.log(email); // "[email protected]"
console.log(role); // "user" (default)
console.log(isActive); // true (default)
console.log(country); // "Unknown" (default)Output:
🔹 Nested Object Destructuring
Extract properties from nested objects:
const employee = {
name: "Sarah",
position: "Developer",
contact: {
email: "[email protected]",
phone: "123-456-7890",
address: {
street: "123 Main St",
city: "Boston",
zipCode: "02101"
}
},
skills: ["JavaScript", "React", "Node.js"]
};
// Destructure nested properties
const {
name,
position,
contact: {
email,
phone,
address: {
city,
zipCode
}
}
} = employee;
console.log(name); // "Sarah"
console.log(email); // "[email protected]"
console.log(city); // "Boston"
console.log(zipCode); // "02101"Output:
🔹 Function Parameter Destructuring
Use destructuring in function parameters:
// Function that accepts an object and destructures it
function displayUserInfo({name, age, email, country = "USA"}) {
return `Name: ${name}, Age: ${age}, Email: ${email}, Country: ${country}`;
}
// Function with nested destructuring
function processOrder({
orderId,
customer: {name, email},
items,
total
}) {
return `Order ${orderId} for ${name} (${email}): ${items.length} items, Total: $${total}`;
}
// Test the functions
const user1 = {name: "Alice", age: 25, email: "[email protected]"};
const user2 = {name: "Bob", age: 30, email: "[email protected]", country: "Canada"};
console.log(displayUserInfo(user1));
console.log(displayUserInfo(user2));
const order = {
orderId: "ORD-001",
customer: {name: "Charlie", email: "[email protected]"},
items: ["Book", "Pen", "Notebook"],
total: 45.99
};
console.log(processOrder(order));Output:
Name: Alice, Age: 25, Email: [email protected], Country: USA
Name: Bob, Age: 30, Email: [email protected], Country: Canada
Order ORD-001 for Charlie ([email protected]): 3 items, Total: $45.99