When I was a complete beginner in JavaScript, I’ve had a time when I was confused with what’s going on when I work with Objects. The task was simple: Allowing my application users to edit the Object, with the original object to be displayed on the split-screen for reference.
I assigned the variable “original” containing the original object to a new variable “edited“.
I update the variable “edited” when the user modifies it in the UI.
And I ended up with this:
Everything seemed to be perfect, but not! Here’s where the concept of Copy by value and reference helped.
Copy by Value:
The value stored in a variable, in memory with a unique memory address is copied and stored in another variable, with a new unique memory address. So, altering one variable doesn’t affect the other.
Copy by Reference:
The value stored in a variable, in memory with a unique memory address is not copied, but the memory address is copied and stored in a variable, which results in both the variables now sharing a common memory address. So, altering any variable affects both variables.
So, how’s this helpful in our example? Both the variables’ values are altered in an attempt to alter anyone. It’s clear that both are somewhere related, and the copy-by-reference definition helped figure out where it is. It’s the memory address.
If we look at this simple code above, altering the variable “a“, doesn’t affect the variable “b“. But in the case of Objects, it does! Why? Here’s the basic definition:
“Primitives are always passed by value, and Objects are always passed by reference”.
Looking back at our first example of object variables, what we did is a simple assignment of a variable holding an object to another variable. We did not assign the object itself here, but under the hood, a reference to that object.
If you think that a reference is assigned only when we try to assign a variable holding an object to another variable, the answer is No! The first time we assign an object directly to a variable itself is just a reference 🙂
So, can we resolve this? Yes! We’ve got several JavaScript ways.
1.Object.assign()
2.Spread operator
These helpful Object copying techniques come under the concept of “Shallow copy“. What’s a shallow copy?
Shallow copy creates a new object and stores its reference in the variable. Every value of the copied object is copied by value if it is a primitive type. If it is not a primitive type, it is just copied by reference.
Using any of the above-mentioned shallow copy methods solved the problem I was facing because the values in my object were of type String, which is a primitive type. If our object was something like this:
Look at our object’s property “comment“, whose value is an object and not a primitive. Shallow copy works only with primitive values. If we try to shallow copy this object assigned to the variable “original”, we will succeed in copying-by-value the value of property “name” but will fail in copying-by-value the value of property “comment“.
To copy the values (which are objects and not primitives) of an object by value, we go to another concept called the “Deep copy” or “Deep clone”. Like there are several ways of achieving a Shallow copy which we saw above, there are several ways to achieve a deep clone.
1. JSON.parse(JSON.stringify(object))
This is a quick hack of deep cloning but not a recommended approach as you’ll end up in problems like data loss in several cases if there are values other than primitives in nested objects, such as Dates, functions, undefined. You’ll have to make sure of the type of values and then use this deep cloning method.
2. Write your own function
3. JS library
A simple, well-tested, and common way of deep cloning is by making use of existing JavaScript libraries. The Most recommended JavaScript utility library for deep cloning is lodash’s cloneDeep method.
Hope this article helped you in understanding the basics of object cloning in JavaScript. If you are using VS code, refer to tips and tricks here.
