Destructuring (Arrays & Objects)
Destructuring extracts values from arrays and objects into individual variables. This module covers advanced patterns - nested destructuring, function parameters, swap, and real-world React patterns.
Advanced Destructuring
- Nested - const { address: { city } } = user; extract deeply nested values
- Rename + Default - const { name: userName = 'Guest' } = user; rename AND provide default
- Function params - function greet({ name, age }) { }; destructure directly in parameters
- Mixed - const { name, hobbies: [first] } = user; object + array destructuring combined
- Swap - [a, b] = [b, a]; swap variables without temp
- Skip - const [, , third] = [1, 2, 3]; skip first two, get third
Advanced Destructuring Code
// Nested destructuring
const apiResponse = {
data: {
user: { name: "Alice", age: 25 },
posts: [{ title: "Hello" }, { title: "World" }]
},
status: 200,
meta: { page: 1, total: 100 }
};
const { data: { user: { name }, posts }, meta: { total } } = apiResponse;
console.log(name, total, posts.length); // "Alice" 100 2
// Function parameter destructuring (very common in React!)
function UserCard({ name, age, role = "user", avatar = "👤" }) {
console.log(`${avatar} ${name} (${age}) - ${role}`);
}
UserCard({ name: "Alice", age: 25, role: "admin" });
// 👤 Alice (25) - admin
// Rename + Default
const { name: userName = "Guest", email: userEmail = "N/A" } = { name: "Bob" };
console.log(userName, userEmail); // "Bob" "N/A"
// Array destructuring with rest
const [first, second, ...remaining] = [1, 2, 3, 4, 5, 6];
console.log(first, second, remaining); // 1 2 [3, 4, 5, 6]
// Swap
let x = 10, y = 20;
[x, y] = [y, x];
console.log(x, y); // 20 10
// React-style: useState simulation
function useState(initial) {
let value = initial;
return [value, (newVal) => { value = newVal; }];
}
const [count, setCount] = useState(0); // array destructuring!
console.log(count); // 0Tip
Tip
Combine destructuring with default values for robust function parameters: function createUser({ name = 'Guest', role = 'user', active = true } = {}) { }. The = {} at the end handles the case where no argument is passed at all.
Destructuring lets you unpack object properties and array elements in one line
Common Mistake
Warning
Destructuring deeply nested objects without intermediate checks. const { a: { b: { c } } } = obj crashes if 'a' or 'b' is undefined. Use optional chaining first: const c = obj?.a?.b?.c, or destructure level by level.
Practice Task
Note
Advanced destructuring: (1) Destructure an API response with nested data. (2) Use computed property names to create objects dynamically. (3) Practice the rest/spread pattern for immutable object updates.
Quick Quiz
Key Takeaways
- Destructuring extracts values from arrays and objects into individual variables.
- Nested - const { address: { city } } = user; extract deeply nested values
- Rename + Default - const { name: userName = 'Guest' } = user; rename AND provide default
- Function params - function greet({ name, age }) { }; destructure directly in parameters