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

---

This is the more elaborate conditioning:

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 }

---

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