🚀 JavaScript Object Merging and Cloning: A Quick Guide

When working with JavaScript Objects, having a clear idea of Merging and Cloning is very important. In this blog we will dive into the 3 ways to clone or merge objects.

In JavaScript, objects are stored by reference. When you assign an object to a variable, you’re actually storing a reference to the memory location where the object resides. This concept is known as Storing Value by Reference. So assigning an object to a new variable doesn’t create a separate copy of the object. Instead, both variables point to the same underlying data in memory.

1. Iterating Through Properties (Manual Cloning)

We take a new object and by iterating through the old object we can assign each property’s value to the new object. It is considered as manual cloning.

let user = { firstName:”Sulagna”, lastName:”Ghosh” } 
let clone = {} 
for(let key in user){ 
    clone[key]=user[key] 
}

Now you get a complete cloned object and even if you change the the firstName property in clone, it will not effect the original object user.

2. Spread Operator(Shallow Copy)

Spread operator(...args) is another way to clone an object, using the spread syntax.

let clone = {...user}

3. Object.assign() (Shallow Merging)

Another way for cloning or merging multiple objects is: Object.assign(target,...sources).

It combines properties from all source objects into the target object.

It only works if the property values are primitives.

let user = { firstName:”Sulagna”, lastName:”Ghosh” } 
const cloneObj = Object.assign({},user)

We can also use Object.assign(target,...sources) to add properties to a certain object.

let obj1 = { address: “abc”}; 
let obj2 = { landmark: “xyz”}; // copies all properties from obj1 and obj2 into user 
Object.assign(user, obj1, obj2); 
console.log(user)// { firstName:”Sulagna”, lastName:”Ghosh”, address:“abc”, landmark:“xyz”}

And if a certain property already exists it gets overwritten.

Deep Cloning

Now if there is object inside object then cloning doesn’t happen in the above ways. Only the first layer of the object will get cloned, the nested object will get copied by reference value. For deep cloning (clone including nested objects), the two popular options are:

• structuredclone

For that case we use structuredclone. It supports in all major browsers and Node.js (version >= 17) and there is no need for external libraries. structuredclone works with most of the data types, array, objects and also on circular references except Functions.

let clone = structuredClone(user);

• loadsh

As previously said, functions cannot be cloned by structuredclone method. For that reason we use external library like lodash.

//So you can’t do below 
structuredClone({ f: function() {} });

It is a popular library for deep cloning objects. The _.cloneDeep(obj) from lodash library is used to do the deep cloning efficiently.

That's all for today guys. For more interesting concepts about JavaScript, subscribe to my newsletter, so you don't miss anything.

Happy Coding 😊