Why JSON.parse(JSON.stringify) Fails for Deep Cloning and What to Use Instead
This article explains the hidden pitfalls of using JSON.parse(JSON.stringify) for deep cloning in JavaScript—such as circular references, loss of special types, prototype chain, and collection data—while recommending the native structuredClone API as a more reliable alternative.
In JavaScript development, deep cloning objects is a common need. Many developers use the one‑line solution JSON.parse(JSON.stringify(obj)), but this approach has many unexpected problems. This article reveals its flaws and presents several more reliable deep‑clone alternatives.
Fatal Flaws of JSON.stringify
The JSON.parse(JSON.stringify(obj)) method looks simple and elegant, but it has serious limitations. Below are situations it cannot handle correctly:
1. Cannot handle circular references
const obj = { name: "对象" };
obj.self = obj; // circular reference
// Throws error: TypeError: Converting circular structure to JSON
const copy = JSON.parse(JSON.stringify(obj));When an object contains a circular reference, this method throws an error and crashes the program.
2. Loss of special data types
JSON serialization cannot handle functions, Symbol, undefined; it converts Date to a string, RegExp to an empty object, and NaN/Infinity to null.
3. Prototype chain loss
After deep cloning, the object becomes a plain object, losing all methods and properties defined on its prototype chain.
4. Handling of Map, Set, WeakMap, WeakSet
These collection types are turned into empty objects during JSON serialization, resulting in complete data loss.
More Reliable Deep Clone Alternatives
Since the JSON method has many pitfalls, what are better alternatives? Modern browsers provide the native Structured Clone API structuredClone, which can handle most cases:
// One‑line deep clone
const copy = structuredClone(original);Advantages:
Supports circular references
Supports most built‑in types (Date, RegExp, Map, Set, etc.)
Performance superior to the JSON method
Disadvantages:
Does not support functions, DOM nodes, or prototype chains
Although the one‑line JSON.parse(JSON.stringify(obj)) solution looks concise and elegant, it has too many defects and may introduce unexpected bugs in real projects. The native structuredClone API is the most recommended simple replacement for deep cloning in modern JavaScript.
JavaScript
Provides JavaScript enthusiasts with tutorials and experience sharing on web front‑end technologies, including JavaScript, Node.js, Deno, Vue.js, React, Angular, HTML5, CSS3, and more.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
