JavaScript Objects Part 5: Object Duplication
Tags: javascript, beginners, webdev
Published: 2021-03-30 16:55:52

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.
```javascript
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.
```javascript
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](https://dev.to/kiranrajvjd/javascript-objects-part-1-4233) 
[Part 2: Dot vs Bracket](https://dev.to/kiranrajvjd/javascript-objects-part-2-dot-vs-bracket-3b3h)
[Part 3: In operator and for in statement](https://dev.to/kiranrajvjd/javascript-objects-part-3-in-operator-and-for-in-statement-e8d)
[Part 4: Constructors and this](https://dev.to/kiranrajvjd/javascript-objects-part-4-constructors-and-this-4am7)