Shallow vs Deep Array-Copy in JavaScript

If you’ve ever decide to learn about JavaScript copy array methods, having an understanding of shallow and deep copies will help to foster your knowledge more in JavaScript. In this article, I explain the difference between shallow and deep copies including how it works in JavaScript.

SHALLOW COPY

A shallow copy of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made. So what this means is that, anytime you change either the source or the copy, you may also cause the other object to change too — and so you may end up unintentionally causing changes to the source or copy that you don’t expect.

One thing you have to take note of is that, selectively changing the value of a shared property of an existing element in an object is different from assigning a completely new value to an existing element.

let ingredients_list = ["noodles", { list: ["eggs", "flour", "water"]} ];
let ingredients_list_copy = Array.from(ingredients_list);

console.log(ingredients_list_copy);
ingredients_list_copy[1].list = ["rice flour", "water"];

console.log(ingredients_list[1].list);
console.log(JSON.stringify(ingredients_list));

DEEP COPY

A deep copy of an object is a copy whose properties do not share the same references (point to the same underlying values) as those of the source object from which the copy was made. So what this means is that, whenever you change either the source or the copy, you can be assured you’re not causing the other object to change too; that is, you won’t unintentionally be causing changes to the source or copy that you don’t expect.

In JavaScript, standard built-in object-copy operations (spread syntax …, Array.prototype.concat(), Array.prototype.slice(), Array.from(), Object.assign(), and Object.create() ) do not create deep copies (but instead, they all create shallow copies).

One way to make a deep copy of a JavaScript object, if it can be serialized, is to use JSON.stringify() to convert the object to a JSON string, and then JSON.parse() to convert the string back into a completely new JavaScript object

let ingredients_list = ["noodles", { list: ["eggs", "flour", "water"] }];
let ingredients_list_deepcopy = JSON.parse(JSON.stringify(ingredients_list));

// Change the value of the 'list' property in ingredients_list_deepcopy.
ingredients_list_deepcopy[1].list = ["rice flour", "water"];
// The 'list' property does not change in ingredients_list.
console.log(ingredients_list[1].list);
// Array(3) [ "eggs", "flour", "water" ]

As you can see in the code above, because a deep copy shares no references with its source object, any changes made to the deep copy do not affect the source object.

I hope by now you’ve understand the concepts behind shallow and deep copies in JavaScript. This resources was made possible by the mozilla documentation which I’ve personally been using so far. If you’re looking to learn about JavaScript as a beginner, I highly recommend you check it out.

I hope this article has been so helpful to you. Don’t forget to give me a clap 👏 share this article & follow me on my social media handles: twitter , facebook and youtube.