Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Destructuring is like unpacking a box - you take out exactly what you need from an array or object. It's a shortcut for extracting multiple values at once!
const colors = ['red', 'green', 'blue']; const first = colors[0]; const second = colors[1]; const third = colors[2]; console.log(first); // red console.log(second); // green console.log(third); // blue
const colors = ['red', 'green', 'blue']; // Get all three in one line! const [first, second, third] = colors; console.log(first); // red console.log(second); // green console.log(third); // blue
Extract array values by position
const user = {
name: 'Alice',
age: 25,
city: 'Boston'
};
const name = user.name;
const age = user.age;
const city = user.city;const user = {
name: 'Alice',
age: 25,
city: 'Boston'
};
// Extract all in one line!
const { name, age, city } = user;Extract properties by matching names
Use propertyName: newName to rename during destructuring
const user = { name: 'Alice', age: 25 };
// Rename during destructuring
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge); // 25
// name and age don't exist!Give properties new variable names
Add = defaultValue to use a fallback if the property is missing
const user = { name: 'Bob' };
// age doesn't exist, use default
const { name, age = 25 } = user;
console.log(name); // Bob
console.log(age); // 25 (default)Prevent undefined with default values
Destructure directly in function parameters
Extract by position with square brackets
Extract by name with curly braces
{ name: newName } gives new variable name
{ x = 5 } provides fallback value