How to destructure multiple props?

Destructuring multiple properties from an object in JavaScript is straightforward and can be done in a single statement. Here’s how you can do it:

Basic Object Destructuring

You can extract multiple properties from an object by listing them within curly braces {}. Here’s an example:

const user = {
    name: 'Alice',
    age: 25,
    email: 'alice@example.com'
};

// Destructuring multiple properties
const { name, age, email } = user;

console.log(name);  // Output: Alice
console.log(age);   // Output: 25
console.log(email); // Output: alice@example.com

Renaming Properties

If you want to rename the destructured properties, you can do so using the colon (:) syntax:

const user = {
    name: 'Bob',
    age: 30,
    email: 'bob@example.com'
};

// Destructuring with renaming
const { name: userName, age: userAge, email: userEmail } = user;

console.log(userName);  // Output: Bob
console.log(userAge);   // Output: 30
console.log(userEmail); // Output: bob@example.com

Default Values

You can also assign default values to properties that may not exist in the object:

const user = {
    name: 'Charlie',
    age: 28
    // email is not defined
};

// Destructuring with default values
const { name, age, email = 'not provided' } = user;

console.log(name);  // Output: Charlie
console.log(age);   // Output: 28
console.log(email); // Output: not provided

Nested Destructuring

If you have nested objects, you can destructure multiple properties at different levels:

const user = {
    name: 'Diana',
    age: 32,
    address: {
        city: 'New York',
        zip: '10001'
    }
};

// Destructuring nested properties
const { name, age, address: { city, zip } } = user;

console.log(name); // Output: Diana
console.log(age);  // Output: 32
console.log(city); // Output: New York
console.log(zip);  // Output: 10001

Conclusion

Destructuring multiple properties from an object is a powerful feature in JavaScript that enhances code readability and efficiency. You can extract properties, rename them, assign default values, and even destructure nested objects all in one go.

If you have any further questions or need more examples, feel free to ask! Happy coding!