DEV Community

Cover image for Bye-Bye `JSON.stringify()` and `{...obj}`, Hello `structuredClone()`!
Dharmendra Kumar
Dharmendra Kumar

Posted on

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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");
Enter fullscreen mode Exit fullscreen mode
  • 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.

Top comments (16)

Collapse
 
alexus85 profile image
Alex Petrik

Finally something new, that hasn't been already mentioned all over the internets . Thanks! :)

Collapse
 
bernardoow profile image
Bernardo Gomes

Thanks for sharing

Collapse
 
silvermock profile image
Marco Silvestroni

Good to know!

Collapse
 
msegmx profile image
msegmx

AI much? You didn't even care to run and print the results of 4) 🙄

Collapse
 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza

👍

Collapse
 
mark_bulusi profile image
Mark Bosco

tks for the post

Collapse
 
jthomp profile image
jthomp

Neat! Thanks for the writeup!

Collapse
 
plto001 profile image
Gyuhang Shim

Good article. Thanks, I got a new good knowledge. :)

Collapse
 
85_lokeshdubey_3c9994433 profile image
85 Lokesh Dubey

Thanks for the article.

Collapse
 
arvindsuriyaa profile image
arvindsuriyaa

Good read !

Collapse
 
danshari profile image
Zach Koch

Console output is missing from section 4

Collapse
 
varuntatva profile image
Varun-Tatva

Very informative.
If we want a shallow copy of a object with having function then {...object} is the way but is there any way to deeply clone a object with having functions?.

Collapse
 
cauuesanttos profile image
Cauê Santos

Thanks for the article

Collapse
 
hufeicom profile image
hufei

Circular Reference with {...obj}

Image description

Collapse
 
mohamed_karim_2dddebb42bd profile image
mohamed karim

Thank for sharing

Some comments may only be visible to logged-in visitors. Sign in to view all comments.