Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Object destructuring is a shortcut to extract properties from objects. Instead of user.name, user.age, you can unpack them all at once!
const user = {
name: 'Alice',
age: 25,
email: 'alice@example.com'
};
const name = user.name;
const age = user.age;
const email = user.email;const user = {
name: 'Alice',
age: 25,
email: 'alice@example.com'
};
const { name, age, email } = user;
// name = 'Alice'
// age = 25
// email = 'alice@example.com'Extracting properties from objects
Use propertyName: newName to rename
const user = {
name: 'Alice',
age: 25
};
// Rename 'name' to 'userName'
const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'
console.log(userAge); // 25
// 'name' and 'age' variables don't exist!
// console.log(name); // Error!When you need different variable names
Use = to set default values
const user = {
name: 'Alice',
age: 25
};
// 'role' doesn't exist, use default
const { name, age, role = 'User' } = user;
console.log(name); // 'Alice'
console.log(age); // 25
console.log(role); // 'User' (default)Handling missing properties
Use nested braces to destructure nested objects
const user = {
name: 'Alice',
address: {
city: 'New York',
zip: '10001'
}
};
const { name, address: { city, zip } } = user;
console.log(name); // 'Alice'
console.log(city); // 'New York'
console.log(zip); // '10001'Working with complex objects
Use ... to gather remaining properties
const user = {
name: 'Alice',
age: 25,
email: 'alice@example.com',
city: 'NYC'
};
const { name, ...rest } = user;
console.log(name); // 'Alice'
console.log(rest);
// { age: 25, email: 'alice@example.com', city: 'NYC' }Gathering remaining properties
Destructure directly in function parameters
// Instead of this:
function greet(user) {
console.log(`Hello, ${user.name}!`);
}
// Do this:
function greet({ name }) {
console.log(`Hello, ${name}!`);
}
greet({ name: 'Alice', age: 25 });
// Hello, Alice!Clean function signatures
Mix both destructuring syntaxes for complex data
const data = {
user: 'Alice',
scores: [95, 87, 92]
};
// Object destructuring + Array destructuring
const { user, scores: [math, english, science] } = data;
console.log(user); // 'Alice'
console.log(math); // 95
console.log(english); // 87
console.log(science); // 92Complex data structures
const { name, age } = userconst { name: userName } = userconst { age = 18 } = userconst { id, ...rest } = userconst { address: { city } } = userfunction MyComponent({ title, children }) - this is object destructuring in action!