Do you know spread operator in Javascript object is mutable?

We often see simple example of cloning an object using spread operator. Even though, it is true that spread operator help to clone a simple object without mutating.

For example,

// Simple object
const simpleObject = {
  firstName: 'param',
  lastname: 'Harrison',
  isMarried: true,
}
// Cloned simple object
const clonedSimpleObject = { ...simpleObject }

simpleObject.firstName = 'ABC'
clonedSimpleObject.firstName = 'XYZ'

console.log(simpleObject.firstName === clonedSimpleObject.firstName) // False

Here we have successfully created a simple object which is not mutated using spread operator.

Partially mutated object

Let's see a complex object example which mutates partially. We will create a nested object with primitive data types and non primitive data types like array

const nestedObject = {
  firstName: 'Param',
  like: ['coffee', 'tea', 'javascript'],
}

// Clone using simple spread operation
const clonedNestedObject = { ...nestedObject }

nestedObject.like.push('sleeping')
clonedNestedObject.like.push('swimming')
clonedNestedObject.firstName = 'Vennila'

console.log(nestedObject.like === clonedNestedObject.like) // True
console.log(nestedObject.like, clonedNestedObject.like) // Both are same array - ["coffee", "tea", "javascript", "sleeping", "swimming"]
console.log(nestedObject.firstName === clonedNestedObject.firstName) // False

Here we create a nestedObject and cloned it using spread operator. Then add values to the array field in both the objects.

If we check the console, both array field are same with same reference.

Only the primitive data types won't get mutated by default when you apply spread operation.

Then how to make sure non primitive data types like objects and arrays can be deep cloned without mutation?.

It is possible using spread operator but it will be more verbose. Let's see it in action.

Deep cloning using spread operator

Let's take the same example as before.

const nestedObject = {
  firstName: 'Param',
  like: ['coffee', 'tea', 'javascript'],
}

const deepClonedObject = {
  ...nestedObject,
  like: [...nestedObject.like],
}

deepClonedObject.like.push('reading')
console.log(nestedObject.like === deepClonedObject.like) // False
console.log(nestedObject.like) // ["coffee", "tea", "javascript", "sleeping", "swimming"]
console.log(deepClonedObject.like) // ["coffee", "tea", "javascript", "sleeping", "swimming", "reading"]

Here we spread the nested array and objects to deep clone it without referencing it.

For non primitive data types, it is neccessary to apply spread operator for every level of nesting to deep clone the object

Now, we have successfully deep cloned the object without mutating it. But if your object is very deeply nested, it will be painful to clone it this way.

There is no other straight forward solution in JS either. We will see some of the libraries in JS which solves this mutation issues in next articles

You can checkout the example here,

Hope you enjoyed and learnt one of the essential trick in JavaScript 😎