Why Changing One Object Changes Another in JavaScript: Shallow Copy vs Deep Copy

When working with objects in JavaScript, developers often need to create copies of existing objects. At first glance, copying an object may seem simple, but the behavior can vary depending on how the copy is created. This becomes especially important when the object contains nested objects.

In JavaScript, there are two main approaches for copying objects:

• Shallow Copy
• Deep Copy

Understanding the difference between these two concepts helps developers avoid unexpected bugs and maintain clean, predictable code.

Why Object Copying Matters

In real-world applications, developers frequently copy objects for several reason

• To update data without modifying the original object
• To maintain immutable data structures
• To prevent accidental changes to shared data
• To manage application state safely

For example, when updating user data or application state, it is often safer to work with a copy instead of modifying the original object.

Shallow Copy

A shallow copy creates a new object, but it only copies the first level of properties. If the object contains nested objects, those nested objects are not duplicated. Instead, both the original object and the copied object share the same reference to the nested object.

One of the most common ways to create a shallow copy in JavaScript is by using the spread operator (...).

In the example below, an object called employee is created that contains employee information along with a nested object called roleDetails. A copy of this object is then created using the spread operator and stored in employeeCopy. After that, both a primitive value (salary) and a nested value (roleDetails.primaryRole) in the original object are modified.

Before Modification:

Before Modification output

After Modification

After Modification output

the spread operator creates a shallow copy, only the top-level properties are copied. The nested object roleDetails is still shared between both objects. Therefore, when primaryRole is changed in the original object, the change also appears in employeeCopy.

Deep Copy

A deep copy creates a completely new object, including all nested objects. This means the copied object does not share references with the original object. As a result, changes made to the original object will not affect the copied object.

Get Ashwini’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

One common way to perform a deep copy in JavaScript is by using JSON.parse(JSON.stringify(object)).

In the following example, an object employee is created similar to the previous example. Instead of using the spread operator, a deep copy is created and stored in a new variable called employeeCopy. After that, both a primitive value and a nested property in the original object employee are modified to observe whether the copied object changes.

Before Modification:

Before Modification Output

After Modification:

After Modification output

• employee.salary change does not affect employeeCopy → primitive values are copied.
• employee.roleDetails.primaryRole change does not affect employeeCopy → nested objects are copied independently.

This is why JSON.parse(JSON.stringify(object)) is used for deep copy.

Common Mistake Developers Make

A common misunderstanding is assuming that the spread operator creates a full copy of the object.

Example mistake:

let copy = {...object}

Many developers believe this creates a completely new object, but in reality it only creates a shallow copy. Nested objects remain shared, which can cause unexpected bugs.

Final Thoughts:

Object copying is a fundamental concept in JavaScript that every developer should understand. While shallow copying is simple and fast, it can cause unexpected behavior when nested objects are involved. Deep copying ensures complete independence between objects and helps prevent accidental data modification.

By understanding when to use shallow copy and deep copy, developers can write more reliable and maintainable JavaScript code.