Problem Statement
Explain object destructuring in JavaScript. Include examples of renaming, default values, and nested destructuring.
Explanation
Object destructuring is a syntax for extracting multiple properties from an object into distinct variables in one statement. It matches variable names to property names.
Basic destructuring extracts properties into variables with the same names. If a property does not exist, the variable is undefined.
Renaming allows you to extract a property but assign it to a variable with a different name using colon syntax.
Default values provide fallback values when properties are undefined or do not exist.
Nested destructuring extracts properties from nested objects in one statement. You can go as deep as needed.
Rest operator collects remaining properties into a new object.
Function parameters can use destructuring to extract properties from objects passed as arguments. This is very common in React.
Benefits:
Cleaner code with less repetition. More readable when extracting multiple properties. Useful for function parameters. Common in modern JavaScript and frameworks.
Destructuring works with const, let, and var. It is one of the most useful ES6 features.
Code Solution
SolutionRead Only
const user = {
name: 'John',
age: 30,
email: 'john@example.com',
address: {
city: 'NYC',
country: 'USA'
}
};
// Basic destructuring
const {name, age} = user;
console.log(name); // 'John'
console.log(age); // 30
// Renaming variables
const {name: userName, email: userEmail} = user;
console.log(userName); // 'John'
console.log(userEmail); // 'john@example.com'
// Default values
const {name, phone = 'N/A'} = user;
console.log(phone); // 'N/A' (property doesn't exist)
const {age, role = 'user'} = user;
console.log(role); // 'user' (default)
// Nested destructuring
const {address: {city, country}} = user;
console.log(city); // 'NYC'
console.log(country); // 'USA'
// Rename nested property
const {address: {city: userCity}} = user;
console.log(userCity); // 'NYC'
// Rest operator
const {name: n, ...otherInfo} = user;
console.log(n); // 'John'
console.log(otherInfo); // {age: 30, email: '...', address: {...}}
// Function parameters
function greet({name, age}) {
console.log(`${name} is ${age} years old`);
}
greet(user); // 'John is 30 years old'
// With defaults in function
function createUser({name, role = 'guest', active = true}) {
return {name, role, active};
}
console.log(createUser({name: 'Jane'}));
// {name: 'Jane', role: 'guest', active: true}
// Array of objects
const users = [
{id: 1, name: 'John'},
{id: 2, name: 'Jane'}
];
const [{name: firstName}, {name: secondName}] = users;
console.log(firstName, secondName); // 'John' 'Jane'