Different Ways to Duplicate Objects in JavaScript

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

Photo by James Orr on Unsplash

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, 10b = 20;console.log(a, b); // 10, 20
When we copy primitive values, only values are copied.

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); // 2b.one = 3;console.log(a.one); //3
When we assign the object to other variables, only the memory address is copied.

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

When the property of the object is changed, the changes are reflected in all variables pointing to 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.

Difference between shallow and deep copy

Shallow Copy

Using the spread operator

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

Using loop

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

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.

Deep clone in pure JavaScript

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 ☕️ .

Better Programming

Advice for programmers.

Javascript Jeep🚙💨

Written by

Articles related to javascript

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Fun Side Projects That You Can Build Today

3.1K

More from Better Programming

More from Better Programming

The Zero-Dollar Infrastructure Stack

1.2K

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade