JS structuredClone: Not Truly a Deep Copy?

When working with complex data structures in JavaScript, you might need to create a copy of an object or array. One of the ways to do this is by using the structuredClone function, which was introduced in ECMAScript 2022. But, does it really provide a true deep copy of the original data? In this article, we’ll dive into the details of structuredClone and explore its limitations.

What is Structured Clone?

Structured clone is a method of creating a copy of a JavaScript object that preserves the structure and properties of the original object. It’s intended to be a more efficient and reliable alternative to other cloning methods like JSON.parse(JSON.stringify(obj)) or using a library like Lodash.

const original = { a: 1, b: { c: 2, d: 3 } };
const clone = structuredClone(original);

console.log(clone); // { a: 1, b: { c: 2, d: 3 } }

The Problem with Shallow Copies

Before we dive into the limitations of structuredClone, let’s understand the problem with shallow copies. A shallow copy of an object only copies the top-level properties, without recursively copying the nested objects or arrays. This can lead to unexpected behavior when modifying the clone, as it can affect the original object.

const original = { a: 1, b: { c: 2, d: 3 } };
const shallowClone = { ...original };

shallowClone.b.c = 4;

console.log(original); // { a: 1, b: { c: 4, d: 3 } }

The Promise of Structured Clone

Structured clone is designed to provide a deeper copy of the original object, recursively cloning nested objects and arrays. This should, in theory, prevent the issues we saw with shallow copies.

const original = { a: 1, b: { c: 2, d: 3 } };
const clone = structuredClone(original);

clone.b.c = 4;

console.log(original); // { a: 1, b: { c: 2, d: 3 } }

But, is it Really a Deep Copy?

While structuredClone does provide a deeper copy than shallow copies, it’s not a true deep copy in all cases. There are some edge cases where structuredClone can fail to create a completely independent copy of the original object.

Edges Cases: Functions, Symbols, and More

Here are some examples of edge cases where structuredClone can fail:

• Functions: Structured clone will not copy functions, instead, it will create a new reference to the original function.
• Symbols: Structured clone will not copy symbols, as they are unique to each realm.
• RegExp: Structured clone will not copy RegExp objects, as they contain a reference to the original object.
• Date: Structured clone will create a new Date object, but it will not preserve the original time zone.
• Error: Structured clone will not preserve the original error message or stack trace.

const original = {
  func: function() { console.log('Hello!'); },
  symbol: Symbol('foo'),
  regex: /hello/g,
  date: new Date('2022-01-01T12:00:00.000Z'),
  error: new Error('Something went wrong!')
};

const clone = structuredClone(original);

console.log(clone.func === original.func); // true
console.log(clone.symbol === original.symbol); // false
console.log(clone.regex === original.regex); // false
console.log(clone.date.toISOString() === original.date.toISOString()); // false
console.log(clone.error.message === original.error.message); // true, but stack trace is lost

Workarounds for Edge Cases

While structuredClone is not a true deep copy in all cases, we can use some workarounds to overcome its limitations:

Functions

To clone functions, we can use the Function constructor or a library like Lodash.

const original = {
  func: function() { console.log('Hello!'); }
};

const clone = {
  func: new Function(original.func.toString()) // Create a new function from the original function's source code
};

console.log(clone.func === original.func); // false

Symbols

To clone symbols, we can use the Symbol.for method or a library like Lodash.

const original = {
  symbol: Symbol('foo')
};

const clone = {
  symbol: Symbol.for(original.symbol.description) // Create a new symbol with the same description
};

console.log(clone.symbol === original.symbol); // false, but they have the same description

RegExp

To clone RegExp objects, we can create a new RegExp object with the same pattern and flags.

const original = {
  regex: /hello/g
};

const clone = {
  regex: new RegExp(original.regex.source, original.regex.flags) // Create a new RegExp object with the same pattern and flags
};

console.log(clone.regex === original.regex); // false

Date

To clone Date objects, we can create a new Date object with the same time zone.

const original = {
  date: new Date('2022-01-01T12:00:00.000Z')
};

const clone = {
  date: new Date(original.date.getTime()) // Create a new Date object with the same time zone
};

console.log(clone.date.toISOString() === original.date.toISOString()); // true

Error

To clone Error objects, we can create a new Error object with the same message and stack trace.

const original = {
  error: new Error('Something went wrong!')
};

const clone = {
  error: new Error(original.error.message) // Create a new Error object with the same message
};

console.log(clone.error.message === original.error.message); // true, but stack trace is still lost

Conclusion

While structuredClone is not a true deep copy in all cases, it’s still a useful method for creating a copy of a JavaScript object. However, it’s essential to be aware of its limitations and use workarounds for edge cases. By understanding the limitations of structuredClone, you can write more robust and reliable code that handles complex data structures with confidence.

Best Practices

Here are some best practices to keep in mind when using structuredClone:

1. Use structuredClone for simple data structures, like objects and arrays, where a shallow copy is sufficient.
2. Avoid using structuredClone for complex data structures that contain functions, symbols,RegExp objects, Date objects, or Error objects.
3. Use workarounds for edge cases, like cloning functions with the Function constructor, cloning symbols with the Symbol.for method, and cloning RegExp objects with the new RegExp constructor.
4. Test your code thoroughly to ensure that the clone is independent of the original object.

Edge Case	Solution
Functions	Use the Function constructor or a library like Lodash
Symbols	Use the Symbol.for method or a library like Lodash
RegExp	Create a new RegExp object with the same pattern and flags
Date	Create a new Date object with the same time zone
Error	Create a new Error object with the same message, but be aware of the lost stack trace

By following these best practices, you can ensure that your code is reliable and efficient when working with complex data structures in JavaScript.

Frequently Asked Question

Get answers to your burning questions about JS structuredClone and its deep copying capabilities!