JavaScript Destructuring
Destructuring in JavaScript is a convenient way to extract values from arrays or properties from objects into distinct variables. It simplifies code and makes it more readable by reducing the need for repetitive code.
1. Array Destructuring
Array destructuring allows you to unpack values from arrays into individual variables. The order of the variables corresponds to the order of the values in the array.
// Example of array destructuring
const numbers = [1, 2, 3];
const [one, two, three] = numbers;
console.log(one); // Output: 1
console.log(two); // Output: 2
console.log(three); // Output: 3
You can also skip values and use default values:
// Skipping values and using default values
const colors = ['red', 'green'];
const [primary, , secondary = 'blue'] = colors;
console.log(primary); // Output: red
console.log(secondary); // Output: blue (default value)
2. Object Destructuring
Object destructuring allows you to extract properties from objects into individual variables. The variable names must match the property names in the object.
// Example of object destructuring
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // Output: John
console.log(age); // Output: 30
You can also assign new variable names and set default values:
// Assigning new variable names and default values
const user = { firstName: 'Jane', lastName: 'Doe', age: 25 };
const { firstName: fname, lastName: lname, gender = 'Female' } = user;
console.log(fname); // Output: Jane
console.log(lname); // Output: Doe
console.log(gender); // Output: Female (default value)
3. Nested Destructuring
Destructuring can also be applied to nested objects and arrays.
// Nested destructuring
const userProfile = { name: 'Alice', address: { city: 'Wonderland', zip: '12345' } };
const { name, address: { city, zip } } = userProfile;
console.log(name); // Output: Alice
console.log(city); // Output: Wonderland
console.log(zip); // Output: 12345
4. Practical Use Cases
- Function Parameters: Destructuring can simplify function parameters, especially with objects.
// Function with object destructuring
function displayProfile({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
displayProfile({ name: 'Bob', age: 22 });