JavaScript Objects Explained: Their Importance and Use.

What is Object?

Object is datatype of JS, and we can store string, integer, Boolean, array, object and many more thing we can store. and object is a complex data structure that allows you to store collections of data and more complex entities.

Before we go and more talk about Object lets first, we understand 2 most important concept that we are going to use more frequent during explains of Object method.

When we copy object from one object to different object for that there are 2 ways of copying object from one object to different object.

Two ways of copying object

Shallow Copy

When we copy object a from object b, it will copy the value from object a to object b, but both objects will still point to the same memory location. This creates a big problem because any change made to one object will also appear in the other object, and this is called a shallow copy.

Ex-: let’s assume we have one objects p1 and it’s containing some information now due to some reason you want to copy into p2 object what will happen is both will be pointing the same memory location where data is stored and due this when you make the change in any of the object it will impact both of them. please refer below image for better understanding.

var p1={ name: "Ram", city: "HYD"}
var p2 = p1;
console.log(p1) // output -:  {name: "Ram", city: "HYD"}
console.log(p2) // output -:  {name: "Ram", city: "HYD"}

//Now we will make the change in name for p2 object
p2.name ="Shyam";

console.log(p1) // output -:  {name: "Shyam", city: "HYD"}
console.log(p2) // output -:  {name: "Shyam", city: "HYD"}

p1.name = "Sidd"

console.log(p1) // output -:  {name: "Sidd", city: "HYD"}
console.log(p2) // output -:  {name: "Sidd", city: "HYD"}

Deep Copy

When we copy object using deep copy by that time both the object will not point the same memory location and because of that if you make changes in any of the object it will not impact any of them.

Ex -: Let’s assume we have 2 object p1 and p2 and you want to copy p1 into p2 object using deep copy for using spread operator p2 = {…p1} we can do deep copy Please refer below image for better understanding.

//Deep Copy
var p1={ name: "Ram", city: "HYD"}
var p2 = {...p1};
console.log(p1) // output -:  {name: "Ram", city: "HYD"}
console.log(p2) // output -:  {name: "Ram", city: "HYD"}

//Now we will make the change in name for p2 object
p2.name ="Shyam";

console.log(p1) // output -:  {name: "Ram", city: "HYD"}
console.log(p2) // output -:  {name: "Shyam", city: "HYD"}

p1.name = "Sidd"

console.log(p1) // output -:  {name: "Sidd", city: "HYD"}
console.log(p2) // output -:  {name: "Shyam", city: "HYD"}

Note -: If you are doing deep copy using spread operator {…p1} it will never work for nested object because when you use spread operator to copy it will copy the top-level properties, but nested objects remain reference to the original object.

const p1 = {
  name: "Ram",
  address: {
    city: "HYD",
    country: "India"
  }
};

const p2 = {...p1};

p2.name = "Shyam";
p2.address.city = "Bangalore";

console.log(p1); // Output: {name: "Ram", address: {city: "Bangalore", country: "India"}}
console.log(p2); // Output: {name: "Shyam", address: {city: "Bangalore", country: "India"}}

To handle this problem, first we will convert the object to a string. Once you create the string, it will be assigned to a new memory location. Then, we will convert it back to an object, using this way object will be pointing to different location even nested object as well.

var p1 = {
  name: "Ram",
  address: {
    city: "HYD",
    country: "India"
  }
};
//Converting to String from Object
var p2 = JSON.stringify(p1);
//Converting back to Object
p2 = JSON.parse(p2);

p2.name = "Shyam";
p2.address.city = "Bangalore";

console.log(p1);// Output -: { name: 'Ram', address: { city: 'HYD', country: 'India' } }
console.log(p2);// Output -: { name: 'Shyam', address: { city: 'Bangalore', country: 'India' } }

Object Methods

• Object.assign()

  This method is used to copy object from a to b and it will create a shallow copy of the object.

const userInfo={
    name: "Ram",
    address: {
        city: "HYD"
    }
}

const copyObj = Object.assign(userInfo);
console.log(userInfo); // output - { name: 'Ram', address: { city: 'HYD' } }
console.log(copyObj); // output - { name: 'Ram', address: { city: 'HYD' } }

copyObj.name = "Shiv";
copyObj.address.city="Pune";

console.log(userInfo); // output - { name: 'Shiv', address: { city: 'Pune' } }
console.log(copyObj); // output { name: 'Shiv', address: { city: 'Pune' } }

• Object.create()

  When we use this method, it’s basically inherited the properties from parent object, but it doesn't have its own properties, and it will create shallow copy of parent object.

    const userInfo={
        name: "Ram",
        address: {
            city: "HYD"
        }
    }
    const copyObj = Object.create(userInfo);
    console.log(userInfo.name); // Ram
    console.log(copyObj.name); // Ram
  
    console.log(copyObj) // output = {} Reason -: copyObj doesn't have its own properties.
  
    userInfo.name = "Shiv";
    userInfo.address.city="Pune";
    //copyObj.address.city="Pune";
  
    console.log("user Info -> " + userInfo.name); // Shiv
    console.log("copy obj ->" + copyObj.name); // Shiv
    console.log("user Info -> " + userInfo.address.city); // Pune
    console.log("copy obj ->" +copyObj.address.city); // Pune
  

• Object.values()

  You can see the present value in the object using this method in the array format.

const userInfo={
    name: "Ram",
    address: {
        city: "HYD"
    }
}

console.log(Object.values(userInfo)); // Output -: [ 'Shiv', { city: 'Pune' } ]

• Object.getOwnPropertyNames()

  You can see the Key Present in the Object using this method in the array method.

const userInfo={
    name: "Ram",
    address: {
        city: "HYD"
    }
}

console.log(Object.getOwnPropertyNames(userInfo)); // Output -: [ 'name', 'address' ]

• Object.entries()

  when you want to access the key and value from Object you can use this method it will return array of key and value [key, value].

  Note -: It will only return top level of key and value pair from object. means it cannot access the nested object for those it will return [object, Object]

const userInfo={
    name: "Ram",
    address: {
        city: "HYD",
        pincode: "212233"
    }
}

for (const [key, value] of Object.entries(userInfo)) {
  console.log(`${key}: ${value}`);
}
//output -: 1st loop ->  name: Shiv
//       2nd loop -> address: [object,Object]

//OR 

const entries = Object.entries(userInfo);
entries.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

//output -: 1st loop ->  name: Shiv
//       2nd loop -> address: [object,Object]