Different Ways to Duplicate Objects in JavaScript

It turns out there are a lot of different ways to duplicate objects

In JavaScript, a variable can store two types of data:

• Primitive
• Reference

When we copy primitive values, only the value will be copied.

var a = 10;

var b = a;

console.log(a, b); // 10, 10

b = 20;

console.log(a, b); // 10, 20

But when we copy reference values, the memory address of the object is shared.

var a = { one : 1};

var b = a;

a.one = 2;

console.log(b.one); // 2

b.one = 3;

console.log(a.one); //3

Once we change the property of a or b, we are changing the value at the address of the object.

If we want to copy a primitive value, we can use assignment operator (=), but for objects we cannot use the assignment operator.

When copying objects, there are two types:

• Shallow copy
• Deep copy

When we shallow-copy a source object to a target object, if the property value of the source object is primitive, then the value is copied to the target object. But if the property value of the source object is reference, then the reference is shared between the source and target objects.

In a deep copy, all the properties (including reference) of the source object are copied as values to the target object. There is no sharing of the reference between the source and target objects.

---

Shallow Copy

Using the spread operator

https://gist.github.com/Jagathishrex/8cd8af78bb7d4c9c7cfbba8507be0a6a#file-copyobjbyspread-js

The spread operator will copy all the enumerable properties of the obj to the copiedObj.

Using loop

https://gist.github.com/Jagathishrex/ba23b837ff09ef78f3be40ed9b443609#file-copyobjbyfor-js

This above code will loop through all the properties of the object and copy the value to the target object.

Object.assign

var source = {one : 1, nested: {two : 2}};

var target = Object.assign({}, source);

---

Deep Copy

Using JSON.stringify and JSON.parse

https://gist.github.com/Jagathishrex/63fef951126bd3da53496abf4a822009#file-jsoncopy-js

JSON.stringify and JSON.parse only work with number, string, and object literals and don’t support function or symbol properties.

Also, if the value of the property in the object is Date, then using JSON.stringify will convert the Date object to a string.

var a = { d : new Date() };

var b = JSON.parse(JSON.stringify(a));

b ; // {d: "2019-11-26T00:28:18.775Z"}

What is a circular object?

var a = {}; 

a.a = a;

Circular objects are objects that have a property value referencing to themselves.

When we perform a deep copy of a circular object, it goes on endlessly. JSON.stringify/parse will throw an exception error when we perform a deep copy on a circular object.

We can use Object.assign to copy a circular object — but avoid creating a circular object in the first place.

---

Implementing Custom Clone

In the deepClone method, we will loop through all the properties of the object. If the value of the object is primitive, just copy it. If the value is reference, call the deepclone method.

https://gist.github.com/Jagathishrex/0884e892f4321ffa056620cadc83dfdf#file-deepcopy-js

---

All the above methods only focus on objects, not arrays. They may not work for arrays.

Thanks for reading, and I hope you liked this piece.

Sponsor me a coffee ☕️ .