Bye-Bye `JSON.stringify()` and `{…obj}`, Hello `structuredClone()`!

1. Simple Object Cloning: The Basics

• Using {...obj} (Shallow Copy)

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

  shallowCopy.details.age = 30;

  console.log(original.details.age); // 30
  console.log(shallowCopy.details.age); // 30

• What’s happening?

  • The spread operator {...obj} only creates a shallow copy. The details object is not deeply cloned, so changes to shallowCopy.details affect the original details as well.
  • Using JSON.stringify() + JSON.parse() (Deep Copy)

  const original = { name: "Alice", details: { age: 25 } };
  const deepCopy = JSON.parse(JSON.stringify(original));

  deepCopy.details.age = 30;

  console.log(original.details.age); // 25
  console.log(deepCopy.details.age); // 30

• What’s happening?

  • This method creates a deep copy, but it has limitations: it cannot handle functions, undefined, or circular references.
  • Using structuredClone() (Deep Copy)

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

  clone.details.age = 30;

  console.log(original.details.age); // 25
  console.log(clone.details.age); // 30

• What’s happening?
  • structuredClone() creates a deep clone, preserving the structure without any of the limitations of JSON.stringify() and handling complex data types like circular references and undefined.

2. Handling Circular References: A Challenge

• Circular Reference with {...obj}

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const shallowCopy = { ...original }; // TypeError: Converting circular structure to JSON

• What’s happening?

  • {...obj} can’t handle circular references, resulting in an error.
  • Circular Reference with JSON.stringify()

  const original = { name: "Alice" };
  original.self = original;

  // This will cause an error:
  const jsonCopy = JSON.parse(JSON.stringify(original)); // TypeError: Converting circular structure to JSON

• What’s happening?

  • JSON.stringify() also fails with circular references, throwing an error.
  • Circular Reference with structuredClone()

  const original = { name: "Alice" };
  original.self = original;

  const clone = structuredClone(original);

  console.log(clone !== original); // true
  console.log(clone.self === clone); // true

• What’s happening?
  • structuredClone() seamlessly handles circular references, creating a proper deep clone without errors.

3. Cloning with Functions and undefined: Another Test

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const shallowCopy = { ...original };

  console.log(shallowCopy.greet()); // "Hello!"
  console.log(shallowCopy.value); // undefined

• What’s happening?

  • {...obj} copies functions and undefined as expected, but only shallowly.
  • Using JSON.stringify()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const jsonCopy = JSON.parse(JSON.stringify(original));

  console.log(jsonCopy.greet); // undefined
  console.log(jsonCopy.value); // undefined

• What’s happening?

  • JSON.stringify() cannot serialize functions or undefined, resulting in their loss in the cloned object.
  • Using structuredClone()

  const original = { name: "Alice", greet: () => "Hello!", value: undefined };
  const clone = structuredClone(original);

  console.log(clone.greet); // undefined
  console.log(clone.value); // undefined

• What’s happening?
  • structuredClone() also does not clone functions but preserves undefined values, making it more reliable than JSON.stringify() for complex objects.

4. Speed and Efficiency: A Performance Note

• Efficiency with Large Data

  const largeArray = new Array(1e6).fill({ key: "value" });

  console.time("structuredClone");
  const clone = structuredClone(largeArray);
  console.timeEnd("structuredClone");

  console.time("JSON.stringify + JSON.parse");
  const jsonCopy = JSON.parse(JSON.stringify(largeArray));
  console.timeEnd("JSON.stringify + JSON.parse");

• What’s happening?
  • structuredClone() is often faster than JSON.stringify() + JSON.parse() for large, complex data, and avoids the pitfalls of serializing and deserializing.

5. Conclusion: Why structuredClone() is the Future

• Reliability: Handles circular references, functions, and undefined values more predictably.
• Efficiency: Performs deep cloning faster for large datasets and doesn’t require workarounds.
• Simplicity: One method to rule them all—no more choosing between {...obj}, JSON.stringify(), or custom deep clone functions.