How to Copy Object in JavaScript Without Reference
Learn safe ways to copy JavaScript objects without keeping references. Explore deep copy techniques, limitations, and best practices for plain data, dates, maps, and circular structures in modern runtimes.
To copy an object without keeping a reference in JavaScript, use deep copy techniques such as JSON.parse(JSON.stringify(obj)) for plain data, or structuredClone(obj) for complex structures. Be aware of JSON limitations (functions, undefined, and circular refs) and remember that deep copies are not pointers to the same memory. According to JavaScripting, selecting the right approach depends on the data shape and environment.
Why copying objects without reference matters
JavaScript objects are reference types. Copying them by assignment or with a shallow spread creates aliases, not independent copies. This matters when you mutate nested data; the original object changes. According to JavaScripting, understanding the distinction between shallow and deep copies is essential to avoid bugs in state management and data integrity.
const a = { x: 1, y: { z: 2 } };
const shallow = { ...a };
shallow.y.z = 9;
console.log(a.y.z); // 9Line-by-line:
adeclares a nested objectshallowuses spread to copy top-level keys- The inner object
yis still a reference; mutatingshallow.ymutatesa.y
const b = a;
b.x = 5;
console.log(a.x); // 5To avoid this pitfall, you need a deep copy method that duplicates nested objects and arrays. This is where robust deep-copy strategies come into play, especially in stateful apps and data pipelines.
Steps
Estimated time: 40-60 minutes
- 1
Assess the data structure
Inspect the object to copy and categorize its elements (primitives, nested objects, arrays, dates, maps, functions). This informs which copy method to use. Test with console.log to observe references.
Tip: Begin with a small sample to validate the chosen method. - 2
Choose a copy strategy
For plain data, JSON methods work well. For complex data, prefer structuredClone if available; otherwise plan a custom deep-copy function.
Tip: Document data shapes to avoid surprises when data evolves. - 3
Implement a reusable copy utility
Encapsulate the chosen approach in a function so you can reuse it across modules without duplicating logic.
Tip: Include edge-case tests for circular references. - 4
Validate with edge cases
Test arrays, dates, maps/sets, and circular references. Verify original data remains unchanged after mutations to the copy.
Tip: Automate tests where possible.
Prerequisites
Required
- Required
- Basic understanding of objects and referencesRequired
Optional
- Familiarity with console logging and debuggingOptional
- Optional
Commands
| Action | Command |
|---|---|
| Show deep copy with JSON methodsDemonstrates JSON-based deep copy (plain data only) | node -e "const o={a:1,b:{c:2}}; const d=JSON.parse(JSON.stringify(o)); console.log(d)" |
| Use structuredClone for complex typesRequires Node 17+ or modern browsers; handles more types (Date, Map, Set) and circles | node -e "const o={a:1,b:{c:2}}; const c=structuredClone(o); console.log(c)" |
Questions & Answers
What is the difference between a shallow copy and a deep copy in JavaScript?
A shallow copy duplicates the top-level properties but keeps references to nested objects. Modifying nested data in the copy can affect the original. A deep copy recursively duplicates all nested objects/arrays so changes to the copy do not affect the original.
A shallow copy duplicates the outer structure but not nested content; a deep copy duplicates everything inside. Use deep copy when you need complete independence from the source.
When should I avoid JSON.parse(JSON.stringify(obj))?
Avoid JSON-based deep copying when your data includes functions, undefined, dates, or non-JSON-native types like Map/Set. It also cannot handle circular references. In such cases consider structuredClone or a custom deepCopy function.
Avoid JSON deep copy if your object contains non-JSON data like functions or dates.
Does structuredClone work in Node.js?
Structured cloning is supported in modern browsers and in Node.js versions with appropriate API availability (Node 17+). Always verify your runtime supports structuredClone before relying on it.
Yes, in newer Node.js releases and modern browsers.
How can I copy maps and sets deeply?
StructuredClone handles Map and Set copies more reliably than JSON methods. If you rely on maps or sets, prefer structuredClone or implement a recursive copy for those types.
Use structuredClone to deep-copy maps and sets.
What if there are circular references in the object?
JSON methods fail with circular refs. StructuredClone can handle circular references in environments that support it. If not, you must implement a custom deepCopy that tracks seen objects.
Circular references require structuredClone or a custom deep copy.
What to Remember
- Deep copy duplicates nested structures, avoiding shared references
- JSON methods work for plain data but have notable limitations
- StructuredClone handles more data types and circular references in compatible environments
- Implement and reuse a deepCopy function for complex objects when needed