One of the fundamental differences of objects versus primitives is that objects are stored and copied “by reference”, whereas primitive values: strings, numbers, booleans, etc — are always copied “as a whole value”.
Copy-by-value and copy-by-reference methods have always confused budding programmers. To understand the nuanced difference between the two types of copy we need to understand what happens in the memory after we assign a value to it.
That’s easy to understand if we look a bit under the hood of what happens when we copy a value.
Let’s start with a primitive datatype, such as a string.
Here we put a copy of message into phrase:
let message = “Janani Hello!”;
let phrase = message;
As a result we have two independent variables, each one storing the string “Janani Hello”. It seems quite obvious. But its not the case in objects.
A variable assigned to an object stores not the object itself, but its “address in memory” — in other words “a reference” to it. When you assign a variable, it is a reference to an object not the object itself. When you copy an object “b=a” both variables will point to the same address.
This behavior is called copy by reference value.
When it comes to objects though, the values happen to be the memory addresses of those objects. Thanks to this we can modify values that sit in those memory addresses. Again, this is called copy by reference value but most people refer to this as copy by reference.
Let’s look at an example of such a variable:
let employee= {
name: “Janani”
};
The object is stored somewhere in memory (at the right of the picture), while the “employee” variable (at the left) has a “reference” to it.
We may think of an object variable, such as “employee”, as like a sheet of paper with the address of the object on it. When we perform actions with the object, e.g. take a property “employee.name”, the JavaScript engine looks at what’s at that address and performs the operation on the actual object.
Now here’s why it’s important.
When an object variable is copied, the reference is copied, but the object itself is not duplicated.
For instance:
let employee = {
name: “Janani”
};let database = employee;
So , now we have two variables, each storing a reference to the same object. We can use either variable to access the object and modify its contents as follows :
let employee = {
name: “Janani”
};let database = employee;
employee.name = “Komili”;
database.name = “Puri”;
Conclusion
Objects are assigned and copied by reference. In other words, a variable stores not the “object value”, but a “reference” (address in memory) for the value. So copying such a variable or passing it as a function argument copies that reference, not the object itself.
All operations via copied references (like adding/removing properties) are performed on the same single object.
To make a “real copy” (a clone) we can use “Object.assign” for the so-called “shallow copy” (nested objects are copied by reference) or a “deep cloning” function, such as “_.cloneDeep(obj)”.