Shallow Copy vs. Deep Copy

Objects are the basic blocks of JavaScript. An object is a collection of attributes, and an attribute is an association between a key (or name) and a value. Almost all objects in JavaScript are Object instances at the top of the prototype chain.

When it comes to copying objects in JavaScript, you need to know whether you need to do a shallow copying or a deep copying. In this article, we will go through these two different ways to copy objects.

Shallow copy

Shallow copy: When using the assignment operator to copy a reference variable to a new reference variable, a shallow copy of the referenced object will be created. In short, a reference variable mainly stores the address of the object it refers to. After assigning the value of the old reference variable to the new reference variable, copy the address stored in the old reference variable to the new reference variable. This means that both the old reference variable and the new reference variable point to the same object in memory. As a result, if the state of the object changes through any reference variable, both will be reflected. Let's see an example:

function example() {  "use strict";
  let obj1 = { a: 0, b: { c: 0 } };  let obj2 = Object.assign({}, obj1);  console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}
  obj1.a = 1;  console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}}  console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}
  obj2.a = 2;  console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}}  console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 0}}
  obj1.b.c = 3;  console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 3}}  console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 3}}}
example();

After ES6 released, we can also use spread operator to shallow copy objects.

function example() {  let obj1 = { a: 0, b: { c: 0 } };  let obj2 = { ...obj1 };  console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}  obj1.a = 4;  obj1.b.c = 4;  console.log(JSON.stringify(obj1)); // { "a": 4, "b": { "c": 4}}  console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 4}}}
example();

Deep copy

Deep copy: Unlike shallow copy, deep copy copies all members of the old object, allocates a separate memory location for the new object, and then assigns the copied members to the new object. In this way, the two objects are independent of each other, and in the case of any modification to any one object, the other object is not affected. Similarly, if one of the objects is deleted, the other remains in memory. Now, to create a deep copy of the object in JavaScript, we use the JSON.parse() and JSON.stringify() methods. Let us see the example below.

function example() {  let obj1 = { a: 0, b: { c: 0 } };  let obj2 = JSON.parse(JSON.stringify(obj1));  obj1.a = 4;  obj1.b.c = 4;  console.log(JSON.stringify(obj1)); // { "a": 4, "b": { "c": 4}}  console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}}
example();

Use a JavaScript library to deep copy objects

There are several javascript libraries can provide objects operation utilities like underscore and lodash. In this article, we will introduce you how to use lodash to deep copy objects.

Lodash is a JavaScript library that provides multiple utility functions, and one of the most commonly used functions in the Lodash library is the cloneDeep() method. This method helps to clone objects in depth, and can also clone the limitations of the JSON.stringify() method, that is, non-serializable properties.

const _ = require("lodash");
function example() {  let obj1 = { a: 0, b: { c: 0 } };  let obj2 = _.cloneDeep(obj1);  obj1.a = 4;  obj1.b.c = 4;  console.log(JSON.stringify(obj1)); // { "a": 4, "b": { "c": 4}}  console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}}}
example();

Conclusion

Copying objects in JavaScript can be quite daunting especially if you’re new to JavaScript and don’t know your way around the language. Hopefully this article helped you understand and avoid future pitfalls you may encounter copying objects.

---

Reference: MDN|Web Docs