Copy (Shallow vs Deep)

Shallow = reference copy, Deep = value copy

---

Shallow Copy

"Copies first level only"

A shallow copy creates a new object but shares nested references.

---

Shallow Copy Methods

Spread · Object.assign · Array methods

// Object spread
const copy = { ...original };

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

// Array spread
const copy = [...array];

// Array methods
const copy = array.slice();
const copy = array.concat();

"Shallow copy can be done with spread operator, Object.assign, or array methods like slice and concat."

---

Shallow Copy Limitation

Nested objects still reference original

const original = { a: 1, nested: { b: 2 } };
const copy = { ...original };

copy.nested.b = 3;
console.log(original.nested.b); // 3 (changed!)

"Shallow copy only copies the first level - nested objects still reference the original."

---

Deep Copy

"Complete independent copy"

A deep copy creates a completely independent copy with no shared references.

"Deep copy creates a completely independent copy where nested objects/arrays are also copied, not referenced."

---

Deep Copy Methods

JSON · structuredClone · Lodash

// JSON (limitations: no functions, dates, undefined)
const copy = JSON.parse(JSON.stringify(original));

// structuredClone (modern, better)
const copy = structuredClone(original);

// Lodash
const copy = _.cloneDeep(original);

"Deep copy can be done with JSON methods (limited), structuredClone (modern), or libraries like Lodash."

---

JSON Deep Copy Limitations

No functions · dates · undefined

const obj = {
  func: () => {},
  date: new Date(),
  undef: undefined,
};

const copy = JSON.parse(JSON.stringify(obj));
// func and undef are lost, date becomes string

"JSON deep copy loses functions, converts dates to strings, and removes undefined values."

---

structuredClone

Modern, better deep copy

const copy = structuredClone(original);

• Handles more types than JSON
• Built-in browser API
• Still has limitations (functions, symbols)

"structuredClone is a modern browser API for deep copying that handles more types than JSON methods."

---

When to Use What

Shallow for simple, Deep for nested

Use Case	Method
Simple objects	Shallow copy
Nested objects	Deep copy
Arrays of primitives	Shallow copy
Arrays of objects	Deep copy

"Use shallow copy for simple objects, deep copy when objects have nested structures that need independent copies."

---

Common Scenarios

State updates · Immutability

// React state update (shallow copy)
setState({ ...state, newProp: value });

// Immutable update (deep copy needed for nested)
const newState = {
  ...state,
  nested: { ...state.nested, prop: value },
};

"Shallow copy is often sufficient for React state updates, but nested updates may need deep copy or nested spreading."

---

"Shallow copy creates a new object but shares nested references, done with spread operator or Object.assign. Deep copy creates completely independent copies, done with JSON methods (limited), structuredClone (modern), or libraries. Shallow copy is faster but limited, deep copy is needed when nested structures must be independent."

---

🧠 Ultra-Short Cheat Sheet

Shallow = first level only
Deep = all levels
Spread operator (shallow)
JSON.parse/stringify (deep, limited)
structuredClone (deep, modern)
Nested objects need deep copy