Object Destructuring

• Similar to array Destructuring

    const data = () => {
        return {a:1,b:2,c:3,e:5,f:6,g:7}
    }

    const {
        //Source : Destination = Default
        a: first,
        b: second,
        c: third,
        d: nonExist = 123,
        ...arr
    } = data()

    /* Need ( ) to tell javascript that this is a destructuring and not block statement
        let first,second,arr;

        ({
            a: first,
            b: second,
            ...arr
        } = data())
    */

   /* or assign to variable
        let first,second,arr;

        const tmp = {
            a: first,
            b: second,
            ...arr
        } = data()
   */

    console.log(first); //1
    console.log(second); //2
    console.log(arr); //{ d: 4, e: 5, f: 6, g: 7 }
    console.log(arr.f); //6
    console.log(nonExist) //123
    console.log(arr.d) //undefined

Default Assignment

• If don't want to assign to new variable, can also use the same variable name inside the object

    const data = () => {
        return {a:1,b:2,e:5,f:6,g:7}
    }

    const {
        a,
        b,
        c = 111
    } = data() || {} //if data returns empty then use empty object

    console.log(a); //1
    console.log(b); //2
    console.log(c);

Nested Destructuring

    const data = () => {
        return {
            a:1,b:2,
            c:{
                e:5,
                f:6
            }
        }
    }

    const {
        a,b,
        c = {
            e,
            f
        }
    } = data()

    console.log(a); //1
    console.log(b); //2
    console.log(c) //{e: 5, f: 6}
    console.log(c.e); //5

Nested Array and Object Destructuring

    const arr = [111,222,333]
    const obj3 = {m:99,n:100,o:101}
    const obj = {a:1,b:arr,c:3,d:obj3}

    const obj2 = {
        a, //1
        b, //[111,222,333]
        b:[
            X, //111
            Y, //222
            Z //333
        ],
        c, //3
        d, // {m:99,n:100,o:101}
        d: {
            m, //99
            n, //100
            o //101
        }
    } = obj
    //b = [111,222,333]
    //X = 111
    //m = 99
    //d = {m:99,n:100,o:101}

Named Arguments

    const lookup = ({name="None",id=-1}) => { //Destructuring input parameter and assigning defaults
        console.log(`${name} ${id}`)
    }

    lookup({name:"David",id:1234}) //Giving object with name and id

Destructuring and Restructuring

    const handleResponse = ({
    //Defaults, only works against undefined variables
    topic = "No Topic",
    slides: {
        start = -1,
        end = -1
    }
} = {}) => {
    
    //Restructuring, putting destructed items into an object
    const outputObject = ({
        topic,
        slides:{
            start,end
        }
    })
    console.log(outputObject);
};

const obj = { topic: "Javascript", slides: { start: 0, end: 100 } };
handleResponse(obj); // { topic: 'Javascript', slides: { start: 0, end: 100 } }
let topic; //undefined
const empObj = { topic,slides: { } };
//Defaults
handleResponse(empObj); // { topic: 'No Topic', slides: { start: -1, end: -1 } }