Destructuring of Objects
Tags: es6, computerscience, webdev, programming
Published: 2020-04-11 17:57:56

##Destructuring objects##

Destructuring on objects lets you bind variables to different properties of an object. You specify the property being bound, followed by the variable you are binding its value to.

    var data = {
           name : "Uzair",
           age : 17,
           gender : "male"
       }

destructuring object items name into name and so on..

       var {name,age,person} = data
       console.log(age)

it is also possible to retrive values to a object that is not declared

      var {name,age,gender} = {name:"Catty" , age:"21" , gender:"female"}
      console.log(age)

it is also possible to assing value to variable that are declared before
the name of new variable should be same as the keys of object otherwise it will be undifined

          var data = {
              name : "Uzair",
              age : 17,
              gender : "male"
          };
          var name,age,gender;

         ({name,age,gender} = data);
          console.log(age);

if we want to use a new variable name and assing it object key value

     var data = {
            name: "Uzair",
            age: 17,
            gender: "male",
         };
         //changing key names with new variables
          var { name: nickname, age: umer } = data;
          console.log(nickname); //it will render uzair

using default value , it will assing only in-case when key is not there / undefined
   
              var data = {
              name : "Uzair",
              age : 17,
              gender : "male"
          }

      var {name="usama" , friend ="wahab"} = data
                              
      console.log(name); // name is same as the object value
                              
      console.log(friend); //friend is with default value of wahab

we can also set default value when assinging with a new name
if the variable will match with the object key it will assing values from object otherwise it will 

      var data = {
            name: "Uzair",
            age: 17,
            gender: "male",
          };

        var {
          name: nickname = "uzey",
          age: umer = "barahogya",
          friend: dost = "some text",
        } = data;
        console.log(name); //here name will be assigned the uzair because it 
        exits in object
        console.log(dost); //it will assing some text

 computed property name
 you can specify the name of a property

    var data = {
         name: "Uzair",
         age: 17,
         gender: "male",
       };

      var prop = "name";    //here we are assinging object key name in prop
      var { [prop]: myname } = data;  
      the value of myname will be the value of data.name prop has key name in it 
      it will find value from abject**
      console.log(myname);  //we will get Uzair in result 
 

rest method means you can assing more the one value to a variable

            var data = {
               name: "Uzair",
               age: 17,
               gender: "male",
               friends: ["faiq", "ibad", "wahib"],
                      };

        var { name, ...others } = data;
        console.log(name); //result will be uzair
        console.log(others); //result will be {  age: 17
                                                 gender: "male"
                                                friends:["faiq", "ibad", "wahib"]
                                               }

Hope you find this article useful. Please share your thoughts in the comment section.