Shallow Copy vs Deep Copy in JavaScript

#javascript #webdev #beginners #programming

When working with objects in JavaScript, understanding the difference between shallow copy and deep copy is crucial. This knowledge helps avoid unexpected behavior, especially when dealing with nested objects.

Shallow Copy

A shallow copy duplicates the top level of an object but does not recursively copy nested objects. Instead, it retains references to the original nested objects. Here are some common methods for creating shallow copies: Object.assign() and the spread operator {...object}.

Example

In this example, changing the fullName in narutoCopy does not affect the original naruto object.

However, with nested objects, a shallow copy only copies the references:

In this case, both narutoDetails and narutoDetailsCopy have the same reference to the parent's object. Changing the father property in narutoDetailsCopy also changes it in narutoDetails.

Deep Copy

A deep copy duplicates an object along with all the objects it references, recursively. The easiest way to achieve this in JavaScript is by using JSON.parse(JSON.stringify(object)). For more complex scenarios, libraries like lodash provide deep copy functions.

Example

In this example, borutoCopyis a completely independent copy of boruto. Changes to borutoCopydo not affect boruto.

Top comments (5)

Jon Randy 🎖️ • Jun 24 '24 • Edited

The easiest way to achieve this in JavaScript is by using JSON.parse(JSON.stringify(object))

Not really. Using the built in structuredClone is even easier, and works better:

const copy = structuredClone(object)

MD. JAHID HOSSAIN • Jun 24 '24

JSON.parse(JSON.stringify(object)) efficiently creates a copy of simple objects by converting them to a JSON string and back, but loses complex data types like NaN, Set and Map. structuredClone preserves complex data types and handles NaN and Set, but doesn't support functions or symbols and may not be universally available.

Let's take an example:

const original = {
  value: undefined,
  infinity: Infinity,
  nan: NaN,
  date: new Date(),
  regExp: /hello/i,
  buffer: new ArrayBuffer(10),
  nested: {
    set: new Set([1, 2, 3]),
    map: new Map([["key1", "value1"], ["key2", "value2"]])
  },
  //   func: function() { return "Hello"; },
  //   symbol: Symbol('sym')
};

original object containing various data such as undefined, Infinity, NaN, Date, RegExp, ArrayBuffer, Set and Map. Properties func and symbol are commented.

const clonedJSON = JSON.parse(JSON.stringify(original));
console.log(clonedJSON);
// {
//   "infinity": null,
//   "nan": null,
//   "date": "2024-06-24T07:08:01.362Z",
//   "regExp": {},
//   "buffer": {},
//   "nested": {
//     "set": {},
//     "map": {}
//   }
// }

JSON.parse(JSON.stringify(object))

Loses undefined, Infinity, NaN, functions, symbols, RegExp, Date, Set, Map, ArrayBuffer, and other non-JSON data types.
Suitable for simple, plain objects without complex data types or structures.

const clonedStructured = structuredClone(original);
console.log(clonedStructured);
// {
//   "value": undefined,
//   "infinity": null,
//   "nan": null,
//   "date": "2024-06-24T07:08:01.362Z",
//   "regExp": {},
//   "buffer": {},
//   "nested": {
//     "set": {},
//     "map": {}
//   }
// }

structuredClone

Preserves most data types including undefined, Infinity, NaN, RegExp, Date, Set, Map, ArrayBuffer.
Does not clone functions or symbols.
Suitable for complex objects and structures requiring accurate deep copying.

Case #1

console.log(clonedJSON.nan); // null
// `clonedJSON.nan` will be `null` because `NaN` cannot be represented in JSON and is lost during the stringify operation

console.log(clonedStructured.nan); // NaN
// `clonedStructured.nan` remains `NaN` because `structuredClone` is designed to handle complex JavaScript objects and can correctly preserve `NaN` during the cloning process.

Case #2

console.log(clonedJSON.nested.set); // {}
// `clonedJSON.nested.set` will be `{}` because the `Set` is lost during the `stringify` operation.

console.log(clonedStructured.nested.set); // Set (3) {1, 2, 3}
// `clonedStructured.nested.set` remains a `Set` object containing the same values `[1, 2, 3]` as in the `original` object.