Object Destructuring in Javascript

• Object destructuring is a feature in JavaScript that allows you to extract properties from an object and assign them to variables in a more concise and readable way. Instead of accessing object properties using the dot notation or bracket notation, object destructuring lets you unpack properties into distinct variables.

Here's an example of object destructuring in action:

    const person = { name: 'John', age: 30 };

    // Object destructuring

    const { name, age } = person;

    console.log(name); // "John"

    console.log(age); // 30

• In the code above, we declare an object called person with two properties: name and age. We then use object destructuring to create two variables, name and age, and assign them the corresponding values from the person object.

• Object destructuring can also be used with function parameters. Here's an example:

    function printPersonInfo({ name, age }) {

        console.log(`Name: ${name}, Age: ${age}`);

    }

    const person = { name: 'John', age: 30 };

    // Pass the entire object as an argument

    printPersonInfo(person);

    // Output: "Name: John, Age: 30"

• In the code above, we define a function called printPersonInfo that takes an object as a parameter. We use object destructuring to extract the name and age properties from the object within the function parameter itself. When we call the function with the person object as an argument, the function outputs the name and age properties of the object.

• Overall, object destructuring is a useful feature in JavaScript that can help simplify your code and make it more readable. It can be used in a variety of situations, from unpacking objects to passing objects as function parameters.

• Some more example to understand this concept:

    const obj = {

        fruit1: 'apple',

        fruit2: 'banana',

        fruit3: 'mango',

        fruit4: 'orange',

        fruit5: 'pineapple'

    }

    const { fruit1: a, fruit2: b, fruit3: m, fruit4: o, fruit5: p } = obj

    console.log(a, b, m, o, p) // apple banana mango orange pineapple

    // We destructuring few object's keys

    const obj = {

        fruit1: 'apple',

        fruit2: 'banana',

        fruit3: 'mango',

        fruit4: 'orange',

        fruit5: 'pineapple'

    }

    const { fruit1: a, fruit2: b, fruit3: m } = obj

    console.log(a, b, m) // apple banana mango

    // We destructuring specific object's keys

    const obj = {

        fruit1: 'apple',

        fruit2: 'banana',

        fruit3: 'mango',

        fruit4: 'orange',

        fruit5: 'pineapple'

    }

    const { fruit1: a, fruit3: m, fruit5: p } = obj

    console.log(a, m, p) // apple mango pineapple

    const { fruit1, fruit2, fruit3 } = {

        fruit1: 'apple',

        fruit2: 'banana',

        fruit3: 'mango',

    }

    console.log(fruit1, fruit2, fruit3) // apple banana mango

    // Default Value

    const obj = {

        fruit1: 'apple',

    }

    const { fruit1 = "ananas", fruit2 = "banana", fruit3: m = "mango" } = obj

    console.log(fruit1, fruit2, m)

    // Destructuring object's keys as a function parameter

    let obj = {

        fruit1: 'apple',

        fruit2: 'banana',

        fruit3: 'mango',

    }

    const display = ({ fruit1, fruit2, fruit3 }) => {

        console.log(fruit1, fruit2, fruit3)

    }

    display(obj) // apple banana mango

    // Nested Object Destructuring

    const obj = {

        fruit1: 'apple',

        fruit2: 'banana',

        fruit3: 'mango',

        newFruit: {

            fruit4: 'orange',

            fruit5: 'pineapple'

        }

    }

    const { fruit1, fruit2, fruit3, newFruit: { fruit4, fruit5 } } = obj

    console.log(fruit1, fruit2, fruit3, fruit4, fruit5) // apple banana mango orange pineapple

    // Using ...rest parameter

    const obj = {

        fruit1: 'apple',

        fruit2: 'banana',

        fruit3: 'mango',

        fruit4: 'orange',

        fruit5: 'pineapple'

    }

    const { fruit1, fruit2, ...rest } = obj

    console.log(fruit1, fruit2, rest) // apple banana { fruit3: 'mango', fruit4: 'orange', fruit5: 'pineapple' }