Creating a copy of a JSON object is a very common Angular / JavaScript interview question, mainly used to test your understanding of reference vs value types and immutability.

Let’s break it down in a clear, interview-friendly way.

Why do we need to copy a JSON object?

In JavaScript (and Angular), objects are reference types.

If you do:

let obj1 = { name: 'John' };
let obj2 = obj1;

Both obj1 and obj2 point to the same memory reference.

So:

obj2.name = 'Sam';
console.log(obj1.name); // Sam ❌ (unexpected)

To avoid this, we create a copy (clone).

Types of Copy

1. Shallow Copy

Copies only the top-level properties, not nested objects.

2. Deep Copy

Copies everything, including nested objects and arrays.

1. Shallow Copy Methods

✅ a) Spread Operator (Most commonly used)

const original = { name: 'John', age: 25 };
const copy = { ...original };

✔ Simple
✔ Clean
❌ Not safe for nested objects

✅ b) Object.assign()

const copy = Object.assign({}, original);

✔ Works similar to spread
✔ Used in older codebases

❗ Problem with Shallow Copy

const original = {
  name: 'John',
  address: { city: 'NY' }
};

const copy = { ...original };

copy.address.city = 'LA';

console.log(original.address.city); // LA ❌

Nested object is still shared.

2. Deep Copy Methods

✅ a) JSON.parse + JSON.stringify (Most asked in interviews)

const copy = JSON.parse(JSON.stringify(original));

✔ Easy to remember
✔ Works for most cases

❌ Limitations:

• Removes functions

• Removes undefined

• Fails for Dates, Maps, Sets

✅ b) structuredClone() (Modern & Best)

const copy = structuredClone(original);

✔ Handles nested objects
✔ Supports Dates, Arrays, Objects
✔ Recommended in modern Angular apps

✅ c) Lodash cloneDeep (Real-world usage)

Using Lodash:

import _ from 'lodash';

const copy = _.cloneDeep(original);

✔ Very reliable
✔ Handles complex objects

Angular-Specific Use Cases

✅ 1. Form Editing

this.editUser = { ...this.user };

Prevents modifying original data before save

✅ 2. State Management (NgRx)

Immutability is important → always create copies

✅ 3. Change Detection Optimization

Angular detects changes better when references change

Interview Tips (Very Important)

If interviewer asks:

Q: Difference between shallow and deep copy?

Answer:

• Shallow → copies only first level

• Deep → copies entire object including nested levels

Best answer to impress:

"For simple objects, I use spread operator.
For nested structures, I prefer structuredClone() or cloneDeep to avoid reference issues."

When to Use What?

Scenario	Method
Simple object	Spread (...)
Nested object	structuredClone()
Complex production apps	Lodash cloneDeep
Quick hack	JSON stringify/parse

Final Interview Summary

• Objects are reference types

• Copying is needed to avoid side effects

• Two types:

  • Shallow Copy

  • Deep Copy

• Best modern approach → structuredClone()