(Deep) Cloning Objects in JavaScript

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, which '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

Lodash to the Rescue

Lodash is a modular utility library that adds many functionalities, 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 over the spread operator, 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.