Shalow Versus Structured Clones in Javascript

• February 05 2025
• 3 min. read

In JavaScript, cloning refers to creating a copy of an object or data structure. Depending on the method used, the clone may be shallow (basic duplication) or deep (comprehensive duplication). A structured clone is a deep copy created through specific APIs.

This post will cover both shallow and structured cloning in Javascript, their differences and when to use each.

Shallow Cloning #

A shallow clone copies the references of an object’s properties rather than duplicating the actual objects in memory.

Characteristics:

• Only the first level of the object is duplicated
• Nested objects are not copied, instead, their references are copied
• Changes to the cloned object’s nested properties affect the original object
• Methods for Shallow Cloning:
  • Object.assign()
  • Spread operator

const original = { name: "Alice", details: { age: 25 } };
const shallowClone = { ...original };

// Changing nested object in the clone
shallowClone.details.age = 30;

console.log(original.details.age);
// Output: 30 (nested object shared between original and clone)

In this example, both the original and the cloned objects reference the same details object which will cause unexpected results.

Structured Cloning #

A structured clone creates a deep copy of the original data structure, ensuring that no references to the original object remain. Characteristics:

• Entirely copies the structure and values, including deeply nested objects
• Handles complex types like ArrayBuffer, Blob, Map, Set, and even Date
• Changes to the clone do not affect the original object
• Method for structured cloning
  • StructuredClone()

const original = { name: "Bob", details: { age: 25 } };
const copy = structuredClone(original);

// Changing nested object in the clone
copy.details.age = 30;

console.log(original.details.age); // Output: 25 (original unaffected)

Using structured cloning ensures that the original object remains unchanged when modifying the cloned object.

Final notes #

The table below summarizes the differences between shallow and structured cloning.

Use Cases:

• Shallow clones: Suitable for simple objects or when immutability isn't a concern
• Structured clones: Ideal for complex data that needs to be fully duplicated without reference sharing

Limitations:

• structuredClone() cannot copy objects with functions, prototypes, or symbol keys
• Shallow clones may introduce bugs if unaware of shared references in nested objects.
• json.parse(json.stringify(obj)) can be used as a polyfill for structured cloning in older browsers. However, it has limitations with certain data types like Date objects
• You can also use libraries like Lodash's cloneDeep() for structured cloning.

• Javascript,
• Cloning,
• Copying

Edit on Github