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

• What is structuredClone()?

  • structuredClone() is a global function introduced in 2022 that enables deep cloning of JavaScript objects. Unlike traditional methods like JSON.stringify() and JSON.parse(), which struggle with complex structures and circular references, structuredClone() handles these challenges effortlessly.

• Why is it a game-changer?

  • It’s a robust tool for creating true deep clones, preserving the integrity of nested objects and circular references without the need for extra logic or workarounds. Plus, it's available in modern environments, including Web Workers.

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

• Using {...obj}

  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.

The above is the detailed content of Bye-Bye `JSON.stringify()` and `{...obj}`, Hello `structuredClone()`!. For more information, please follow other related articles on the PHP Chinese website!