DeepClone an object using javascript

Hi there 🙌

Thanks for showing the love and support on the last post. In this article we'll see how we can create a deep clone of an object using javascript.

Let's to this

Here we are taking this test object and we have to create a copy of this object where the following conditions should be working:

• output - deep clone object where assertion input === output false i.e test obj === clone obj //false

• If we'll change any value in test object then it should not affect the cloned object.
  

// write a function to deep clone an object

let test = {
  past: [{day: 31}, {month: 12}, {year: 2020}],
  present: [{day: 1}, {month: 1}, {year: 2021}]
}

We'll solve this problem using recursive function and reduce out bigger problem into smaller chunks.

let test = {
  past: [{day: 31}, {month: 12}, {year: 2020}],
  present: [{day: 1}, {month: 1}, {year: 2021}]
}

const deepClone = (input) => {
    let result = {};

    // logic here

    return result;
}

console.log(deepClone(test))

So here we'll iterate over each key in the object that's why we'll use for in loop. Learn more

for (let key in input){
    result[key] = deepClone(input[key])
}

Using this we'll get the following output where we have only empty objects and value is not passed to the each key.

// output
[
  past: [ [ day: [] ], [ month: [] ], [ year: [] ] ],
  present: [ [ day: [] ], [ month: [] ], [ year: [] ] ]
]

To get each and every value we have to check whether an input is object or not! If input is not a type of object we'll just return the input value.

 if (typeof input !== 'object'){
    return input
  }

After applying the above condition we just reached our output and just need the data in exact format. As of now we have the following output.

[
  past: [ [ day: 31 ], [ month: 12 ], [ year: 2020 ] ],
  present: [ [ day: 1 ], [ month: 1 ], [ year: 2021 ] ]
]

To fix this we have to check the type of the input and if it's an array then we'll assign results as an empty array else an object.

let result = Array.isArray(input) ? [] : {}

So, here we're finally done with the code implementation of deep cloning an object using recursive approach in javascript. Hope this solution help you understand the basics.

Now have your hands on the code playground.

There are endless amounts of useful resources out there, so if you have any recommendations, let everyone know in the comments. I would love to add a few more bookmarks myself.

Thank you so much for reading and recommend me some topics you like to read about. 🙌