Cloning objects in Javascript (and in other languages) is a tricky task. JS doesn’t store the object value in your variable or in your constant, instead, stores a pointer to the object value (the object reference).

Even when you pass an object to a function or method, you are passing this object by reference, not the value.

If you pass (or copy) an object by reference and then change any property, the ‘source’ object’s property also changes.

In any example, I’ll use the object below

const sourceObject = {
  l1_1: {
    l2_1: 123,
    l2_2: [1, 2, 3, 4],
    l2_3: {
      l3_1: 'l3_3',
      l3_3: () => 'l3_3'
    }
  },
  l1_2: 'My original object'
} 

‘Standard’ cloning

We’ll use a ‘standard’ cloning by assigning the source value to another constant

const copiedObject = sourceObject

console.log('sourceObject', sourceObject.l1_2)
// My original object --> ✔️

clonedObject.l1_2 = 'My cloned object'

console.log('clonedObject', clonedObject.l1_2)
// My original object --> ✔️

console.log('sourceObject', sourceObject.l1_2)
// My original object --> ❌

As I said before, when I change the property l1_2 on the cloned object, the value also changes on the source object.

Using this strategy, you are not copying the object at all.

Using spread operator

This time I’ll use the spread operator, that ‘returns’ every element in the object individually.

console.log('sourceObject l1_2', sourceObject.l1_2)
// My original object --> ✔️
console.log('sourceObject l1_1.l2_1', sourceObject.l1_1.l2_1)
// 123 --> ✔️

const clonedObject = { ...sourceObject }
clonedObject.l1_2 = 'My cloned object'

console.log('clonedObject', clonedObject.l1_2)
// My cloned object --> ✔️
console.log('sourceObject', sourceObject.l1_2)
// My original object  --> ✔️

clonedObject.l1_1.l2_1 = '321'

console.log('clonedObject l1_1.l2_1', clonedObject.l1_1.l2_1)
// 321 --> ✔️
console.log('sourceObject l1_1.l2_1', sourceObject.l1_1.l2_1)
// 321 --> ❌️ // Should keep returning 123 if the clone was complete

Now the property l2_1 is copied by value, we can change it, and the original object l2_1 keeps its original value, but if when I changed l1_1.l2_1 (2th depth property) we get the same as the first attempt.

The spread operator does a shallow copy of the object. Only first-level depth properties are copied by value, the nested ones keep copying by reference.

Using Object.assign

Like the spread operator, do a shallow copy, then I will not create the example, trust me, you will get the same result.

const clonedObject = Object.assign({}, sourceObject)

Using JSON.parse and JSON.stringify

This is a simple and fast way to deep clone an object, the point is to convert the object to a string JSON.stringify and then get an object from the string using JSON.parse

Let’s do it

const clonedObject = JSON.parse(JSON.stringify(sourceObject))

clonedObject.l1_1.l2_1 = '321'

console.log('clonedObject l1_1.l2_1', clonedObject.l1_1.l2_1)
// 321 --> ✔️
console.log('sourceObject l1_1.l2_1', sourceObject.l1_1.l2_1)
// 123 --> ✔

Everything seems fine! 🎉 But, did you notice l1_1.l2_3.l3_3 property is a function? 😢

console.log('clonedObject l1_1.l2_3.l3_3', clonedObject.l1_1.l2_3.l3_3)
// undefined --> ❌️
console.log('sourceObject l1_1.l2_3.l3_3', sourceObject.l1_1.l2_3.l3_3)
// function l3_3() {} --> ✔️

Oh, oh, functions are not copied using that method, then, what could we do? The solution is to iterate every nested property in the object and use, for example, the spread operator method. It’s hard and dirty work.

Lodash to the rescue

Lodash is a modular utility library that adds many funcionalities, and one of them is cloneDeep which does exactly what we need to clone (deep) an object through nested properties, keeping all value types, even functions.

import { cloneDeep } from 'lodash'

const clonedObject = cloneDeep(sourceObject)

console.log('clonedObject l1_1.l2_3.l3_3', clonedObject.l1_1.l2_3.l3_3)
// function l3_3() {} --> ✔️
console.log('sourceObject l1_1.l2_3.l3_3', sourceObject.l1_1.l2_3.l3_3)
// function l3_3() {} --> ✔️

Performance

We’ll copy the source object 10.000 times using each method to compare the time elapsed. Compare memory usage is no sense because Object.assign and Spread Operator method is not copying nested property by value.

The results in my browser are the following:

• Object.assign clone elapsed time: 4ms
• Spread operator clone elapsed time: 22ms
• JSON clone elapsed time: 47ms
• Lodash clone elapsed time: 92ms

As you can see, if you only need to do a shallow clone Object.assign is the faster solution, and if you only need to clone values in nested properties (not functions or symbols), JSON.parse(JSON.stringify()) could be a faster solution. But if you want to make sure that all values are copied you must use lodash or a similar solution.

Get your own results by trying it in codesandbox!

Header picture: unsplash-logoKaren Lau