JavaScript Objects Part 5: Object Duplication

One of the basic difference between objects and primitives in javascript is, objects are stored and copied as by reference, whereas primitives are copied as value. Let's look at an example.

let admin = { fname: 'kiran', lname: 'raj'}; The variable admin contains the address of the object not the object itself. The object is stored in a different memory location and that memory address is stored in the admin variable.

let admin1, admin2 = admin; Here both admin1 and admin2 gets the memory address that is stored in the admin variable. So during assignment the address of object is passed. Any change made to the object will affect all the variables that refers to that object.
If we compare admin and admin1 we get true. console.log(admin == admin1) //true. Same will be true for admin1 == admin2 and admin == admin2.

We can create an independent copy of an object(by value) using an empty object and a for loop.

let admin1 = {
    fname: "kiran",
    lname: "raj",
    admin: true,
}

let adminObj = {};
for (key in admin){
    adminObj[key] = admin[key];
}
console.log(adminObj === admin);      //false

console.log(admin, adminObj); 
//{fname: "kiran", lname: "raj", admin: true} 
//{fname: "kiran", lname: "raj", admin: true} 

Here we did not pass the reference of admin to the adminObj, instead we created an empty object then pass each property of admin into the adminObj object using a for loop. Both contains same properties with same key value pairs but they are located at different memory locations, completely independent copy. We can also use Object.assign method to create a independent copy of a object.
The syntax is Object.assign(destinationObject, [sourceObjects...]);

Copy can be shallow or deep, let me explain what those are with an example.

let user = {
    name: {
        fname: "Bruce",
        lname: "Willis",
    },
    email: "Bruce.w@gmail.com",
    admin: false,
}

let user2 = Object.assign({}, user);
console.log(user === user2);            //false
console.log(user.name === user2.name);  //true

Here we are creating a copy of user object using Object.assign method and assign it to user2 variable. Look at the last line console.log(user.name === user2.name); what we are doing is we are checking whether the name property inside user is equal to the name property in user2 and it says true, that means both have reference to the same object. They are not independent copies. user2 is a shallow copy of user object. In shallow copy only the top layer of object properties are copied by value. If there exists any property whose value is an object, it's reference is copied to the new object. To be more precise Object.assign() make only shallow copies of objects in JavaScript. Deeply nested values are copied as a reference to the source object. In a deep copy all property including nested objects are copied by value.

Part 1: Object Basics
Part 2: Dot vs Bracket
Part 3: In operator and for in statement
Part 4: Constructors and this