Destructuring (Arrays, Objects)
Destructuring assignment allows you to unpack values from arrays or properties from objects into separate variables using a convenient syntax.
Array Destructuring
javascript// Basic array destructuring const colors = ['red', 'green', 'blue']; const [first, second, third] = colors; console.log(first); // 'red' console.log(second); // 'green' console.log(third); // 'blue' // Skipping elements const numbers = [1, 2, 3, 4, 5]; const [a, , c, ...rest] = numbers; console.log(a); // 1 console.log(c); // 3 console.log(rest); // [4, 5] // Default values const [x = 10, y = 20, z = 30] = [5]; console.log(x); // 5 console.log(y); // 20 (default) console.log(z); // 30 (default)
Object Destructuring
javascript// Basic object destructuring const person = { name: 'John', age: 30, city: 'New York' }; const { name, age, city } = person; console.log(name); // 'John' console.log(age); // 30 // Renaming variables const user = { id: 1, username: 'johndoe' }; const { id: userId, username: userName } = user; console.log(userId); // 1 console.log(userName); // 'johndoe' // Default values const { theme = 'light', language = 'en' } = { theme: 'dark' }; console.log(theme); // 'dark' console.log(language); // 'en' (default) // Nested destructuring const data = { user: { profile: { name: 'Alice', email: 'alice@example.com' } } }; const { user: { profile: { name, email } } } = data; console.log(name); // 'Alice' console.log(email); // 'alice@example.com'
Function Parameter Destructuring
javascript// Array parameter destructuring function processCoordinates([x, y]) { console.log(`X: ${x}, Y: ${y}`); } processCoordinates([10, 20]); // X: 10, Y: 20 // Object parameter destructuring function createUser({ name, email, age = 18 }) { return { name, email, age, id: Date.now() }; } const newUser = createUser({ name: 'Bob', email: 'bob@example.com' }); console.log(newUser); // { name: 'Bob', email: 'bob@example.com', age: 18, id: ... }
Swapping Variables
javascriptlet a = 1; let b = 2; // Swap using destructuring [a, b] = [b, a]; console.log(a); // 2 console.log(b); // 1
Practical Examples
javascript// API response handling const apiResponse = { data: { users: [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ] }, status: 'success' }; const { data: { users }, status } = apiResponse; console.log(users); // Array of users console.log(status); // 'success' // Array method returns function getNameAndAge() { return ['Charlie', 25]; } const [personName, personAge] = getNameAndAge(); // Multiple return values from objects function getUserInfo() { return { name: 'Diana', email: 'diana@example.com', preferences: { theme: 'dark' } }; } const { name: fullName, preferences: { theme } } = getUserInfo();