JS Object Destructuring

Destructuring object is very needful thing when you are working with objects in vanilla js or any other js frontend framework ,
lets destructe this object Destructuring ;)

let personalData = {
userId: 2223 ,
userDetail:{
    name :{
    userName :{
        fullName:{
            firstName:"John",
            lastName:"Bob",
            otherName: {
                nickName:"Jonn"
            }
        }
    },
    age: 24
    }
}
}

now if you want to have userId initialize in new variable you have to use dot notation to get the userId from personalData object.

let userIdofUser = personalData.userId;
userIdofUser; // output 2223

but now we have more simpler syntax for this using just curly braces containing exact key name of whatever key you required to initialize.

let {userId} = personalData;
userId; // output 2223

this way you got variable userId of personalData easily initialize in new variable, you can also rename the userId with the desired variable name whatever you want eg: idofUser1 separated by a colon with the key name

let {userId : idofUser1} = personalData;
idofUser1; // output 2223

Destructure whatever level you want , for suppose you want nickName directly initialize to some variable user1NickName you can do it too obvious

let {userDetail:{name : {userName : {fullName: {otherName : {nickName : user1NickName }  } } }}}= personalData; 
user1NickName ;

now user1NickName have that value "Jonn" ;)