📦 Unpack Data Like a Pro
Accessing nested properties? Writing obj.prop.subprop.value? Destructuring extracts values in one line.
Object Destructuring
// ❌ Old way: Repetitive
const user = { name: 'John', age: 30, email: 'john@example.com' };
const name = user.name;
const age = user.age;
const email = user.email;
// ✅ Destructuring: One line
const { name, age, email } = user;
console.log(name); // 'John'
console.log(age); // 30
console.log(email); // 'john@example.com'
🎯 Advanced Object Destructuring
const user = {
name: 'John',
age: 30,
address: {
city: 'NYC',
country: 'USA'
},
settings: {
theme: 'dark'
}
};
// Rename variables
const { name: userName, age: userAge } = user;
console.log(userName); // 'John'
// Default values
const { role = 'guest' } = user;
console.log(role); // 'guest' (doesn't exist in user)
// Nested destructuring
const { address: { city, country } } = user;
console.log(city); // 'NYC'
// Rest operator
const { name, ...rest } = user;
console.log(rest); // { age: 30, address: {...}, settings: {...} }
Array Destructuring
// ❌ Old way const colors = ['red', 'green', 'blue']; const first = colors[0]; const second = colors[1]; // ✅ Destructuring const [first, second, third] = colors; console.log(first); // 'red' console.log(second); // 'green' // Skip elements const [primary, , tertiary] = colors; console.log(tertiary); // 'blue' (skipped green) // Rest operator const [head, ...tail] = colors; console.log(head); // 'red' console.log(tail); // ['green', 'blue'] // Swap variables (no temp variable needed!) let a = 1, b = 2; [a, b] = [b, a]; console.log(a, b); // 2, 1
Function Parameters
🔧 Before Destructuring
function createUser(options) {
const name = options.name;
const age = options.age;
const role = options.role || 'user';
return { name, age, role };
}
createUser({ name: 'John', age: 30 });
✅ With Destructuring
function createUser({ name, age, role = 'user' }) {
return { name, age, role };
}
createUser({ name: 'John', age: 30 });
// Clean, readable, default value built-in
Real-World Examples
// API Response handling
const response = await fetch('/api/user');
const { data: { user: { name, email } } } = await response.json();
// React props
function UserCard({ name, age, avatar = '/default.png' }) {
return {name}, {age};
}
// Import specific functions
import { useState, useEffect } from 'react';
// Array methods
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' }
];
users.forEach(({ id, name }) => {
console.log(`${id}: ${name}`);
});
// Promise.all results
const [users, posts, comments] = await Promise.all([
fetchUsers(),
fetchPosts(),
fetchComments()
]);
💡 Pro Tips
- Don’t overdo nesting: 2-3 levels max, then use intermediate variables
- Use defaults wisely: Prevent undefined errors
- Rename for clarity:
const { id: userId }when context matters - Combine with spread:
const { id, ...userData } = user
⚠️ Common Gotchas
// ❌ Variable already declared
let name = 'Old';
let { name } = user; // SyntaxError!
// ✅ Use different name or reassign
let { name: newName } = user;
// ❌ Undefined property access
const { address: { city } } = {}; // Error!
// ✅ Safe with optional chaining
const { address: { city } = {} } = user;
// Or
const city = user?.address?.city;
“Refactored codebase to use destructuring. Function signatures became self-documenting. No more guessing what properties objects have. Code reviews faster. Onboarding new devs easier.”