📦 Destructuring = Clean Assignment
Extracting values is verbose. Destructuring makes it clean. Arrays, objects — assign with ease.
❌ Verbose Extraction
const user = { name: 'Alice', age: 30 };
const name = user.name;
const age = user.age;
✅ Destructuring
const user = { name: 'Alice', age: 30 };
const { name, age } = user;
📝 Destructuring Examples
// Object destructuring
const user = { name: 'Alice', age: 30, email: 'alice@example.com' };
const { name, age, email } = user;
// Rename variables
const { name: userName, age: userAge } = user;
// Default values
const { city = 'Unknown', country = 'Unknown' } = user;
// Nested destructuring
const person = {
name: 'Alice',
address: {
city: 'NYC',
zip: '10001'
}
};
const { name, address: { city, zip } } = person;
// Array destructuring
const colors = ['red', 'green', 'blue'];
const [first, second, third] = colors;
// Skip items
const [first, , third] = colors;
// Rest operator
const [first, ...rest] = colors;
// Destructuring in function params
function printUser({ name, age }) {
console.log(`${name} is ${age} years old`);
}
printUser(user);
// Destructuring with default
function printUser({ name = 'Guest', age = 0 }) {
console.log(`${name} is ${age} years old`);
}
// Destructuring in loops
for (const [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`);
}
// Destructuring with spread
const { name, ...rest } = user;
💡 Destructuring Tips
- Use for object properties
- Use for array elements
- Use in function parameters
- Use default values
- Use renaming for clarity
“Destructuring makes assignment clean. Objects, arrays, parameters. Essential for modern JavaScript.”