Destructuring of Objects

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.