JavaScript: Copy Object

For example, we have this Object:

const myObject = { a: 1, b: 2, 3: 3 }

And we want to clone it without affecting the original Object.

We do not directly assign it ⚠️

const clonedObject = myObject

Because every time the original myObject changes, the clonedObject will also follow the change and vice versa.

It also applies to Array.

We need to construct new Object and put the cloned content into it.

---

Methods

Deep Copy

const myObject = { a: 1, b: 2, 3: 3 } const myClonedObject = JSON.parse(JSON.stringify(myObject))

This will work for nested-structured original Object.

const myObject = { name: "Dilly the Photocopier", location: "Riverbank", specs: { status: "short circuited", model: "Xerox Aqua 3000" }, tags: ["office", "waterproof", "legend"] } // Deep clone using JSON method. const myClonedObject = JSON.parse(JSON.stringify(myObject)) // Modify the clone myClonedObject.name = "Billy the Backup Copier" myClonedObject.specs.status = "fully operational" myClonedObject.tags.push("hero") console.log("Original Object:", originalObject) console.log("Cloned Object:", myClonedObject)

For Array, the slice or spread operator (...) will shallow-clone the original Array.

const myArray = [1, 2 , 3, 4] const myClonedArray = myArray.slice()

Or:

const myClonedArray = [...myArray]

We can use the similar JSON method above to achieve deep copy

const myClonedArray = JSON.parse.JSON.stringify(myArray))

⚠️ JSON method limitations:

• Functions are Lost

  Any functions in the object or array are removed completely.

• undefined Values are Lost

  Properties with undefined are also removed.

• Special Objects Do Not Survive

  It only works for plain objects and arrays. Special objects like:

  • Date becomes a string (ISO string format).
  • RegExp becomes an empty object {}.
  • Map, Set, BigInt, etc., are all lost.

• Circular References Cause Errors

  If the object contains circular references (where one property refers to the object itself), JSON.stringify() throws an error.

---

Shallow Copy: Object.assign() Method

const myObject = { a: 1, b: 2, 3: 3 } const myClonedObject = Object.assign({}, myObject) // myClonedObject consists of myObject's // key - value pairs and both are independent.

Shallow Copy: Loop

function copyObjectWithLoop(originalObject) { if (originalObject?.constructor !== Object) { throw new Error("Invalid input") } const result = {} const objectKeys = Object.keys(originalObject) objectKeys.forEach((key) => { result[key] = originalObject[key] }) return result }

Nested Object properties will remain dependent when using either of the shallow copy methods above.

const original = { name: "Dilly", config: { status: "short circuited" } } const copy = copyObjectWithLoop(original) copy.config.status = "repaired" console.log(original.config.status) // "repaired" — whoops, shared reference

---

Thus, depending the needs, we can either implement deep or shallow copy technique 🙂

Or, we can use this:

function deepClone(value, seen = new WeakMap()) { if (value === null || typeof value !== "object") { return value // Primitive values (string, number, etc.) } if (seen.has(value)) { return seen.get(value) // Handle circular references } let result // Handle Arrays if (Array.isArray(value)) { result = [] seen.set(value, result) value.forEach((item, index) => { result[index] = deepClone(item, seen) }) return result } // Handle Date if (value instanceof Date) { return new Date(value) } // Handle RegExp if (value instanceof RegExp) { return new RegExp(value) } // Handle Map if (value instanceof Map) { result = new Map() seen.set(value, result) value.forEach((mapValue, mapKey) => { result.set(mapKey, deepClone(mapValue, seen)) }) return result } // Handle Set if (value instanceof Set) { result = new Set() seen.set(value, result) value.forEach((setValue) => { result.add(deepClone(setValue, seen)) }) return result } // Handle Plain Object result = {} seen.set(value, result) Object.keys(value).forEach((key) => { result[key] = deepClone(value[key], seen) }) return result }

Or, we can sing a blues song:

🎸 Dilly Lost His Functions Again 🎶

(Key of E, slow blues shuffle)

[Verse 1]

Dilly was a copier, lived down by the stream

Short-circuited his motherboard, lost all of his dreams

They tried to clone his spirit, with JSON in their hands

But Dilly lost his functions, now he barely understands

[Chorus]

🎶 Ohhh, Dilly lost his functions again

He’s a hollowed-out machine, no methods left to mend

A deep copy’s betrayal, left him cold in the rain

Dilly lost his functions… now he’s circlin’ the drain 🎶

[Verse 2]

Billy tried to fix him, with a loop and a prayer

But functions can’t be serialized, nobody seemed to care

His date turned into a string, his regex turned to dust

In the JSON deep-clone nightmare, Dilly lost all his trust

[Chorus]

🎶 Ohhh, Dilly lost his functions again

His callbacks are all broken, no events left to send

A deep copy’s a killer, when you need a loyal friend

Dilly lost his functions… will he ever mend? 🎶

[Bridge]

Now he floats down the river, with a photocopied heart

Half machine, half legend, torn apart

If you see a blinking light, down by the bend

That’s just Dilly printing error logs… at the bitter end

[Final Chorus]

🎶 Ohhh, Dilly lost his functions again

He’s a ghost in the memory, on a loop without end

In the land of deep copies, where objects can’t pretend

Dilly lost his functions… but he’ll always transcend 🎶