Optional chaining (?.)

Syed Kamal — Thu, 17 Sep 2020 18:53:11 +0000

Optional chaining is something I know about it later this week and i found it a powerful feature to use when accessing object keys

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

this is users object in user object some user have parents information and some don't but we have to access it to utilize the information by calling it through dot(.) notation,
we are calling fatherName

personalData.userDetail.fatherName 
//VM2126:1 Uncaught TypeError: Cannot read property 'fatherName' of undefined at <anonymous>:1:34

it throws back an error as father name is not present in the object its something not good practice to print the error on UI so we have to use this old way using the AND operator

personalData && personalData.userDetail 
&& personalData.userDetail.fatherName 
//undefined

now we are in a safe zone by using the AND operator now it returns undefined instead of an error,

here comes optional chaining to reduce syntax simply use (?.) and it returns undefined if the value not exist

personalData.userDetail.username?.fatherName

this is very needful when accessing nested object properties and makes us on the safe side from causing an error

JS Object Destructuring

Syed Kamal — Sat, 15 Aug 2020 16:05:11 +0000

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" ;)

DEV Community: Syed Kamal

Optional chaining (?.)

JS Object Destructuring