How to clone a JavaScript array – Difference between deep copy and shallow copy

We will explain the difference between deep copy and shallow copy when it comes to duplicating arrays in JavaScript.

How do I clone an array?

There are two ways to clone an array: deep copy and shallow copy.

A deep copy also copies the contents of the array, while a shallow copy only copies the array itself.

Difference between deep copy and shallow copy

Deep copying also copies referenced objects. Therefore, changing the referenced object does not change the original array .

On the other hand, shallow copy does not copy the referenced object itself. Therefore, changing the referenced object will also change the original array .

How to clone an array using deep copy

Deep copy also copies the contents (elements) of the array as a new array.
This ensures that it uses a separate memory area from the original array and does not affect the original array.

Below is a sample of deep copy using JSON.parse(JSON.stringify()) .

let originalArray = [{a: 1}, {b: 2}];
let deepCopyArray = JSON.parse(JSON.stringify(originalArray));
console.log(deepCopyArray); // [{a: 1}, {b: 2}]

In the above program, the JSON.parse(JSON.stringify()) function is used to deep copy the originalArray array to deepCopyArray.

How to clone an array using shallow copy

Shallow copy copies the array itself as a new array.
Therefore, it uses the same memory space as the original array, so it may affect the original array.

There are several ways to shallow copy an array.

Sample of array copy using slice method

let originalArray = [1, 2, 3];
let shallowCopyArray = originalArray.slice();
console.log(shallowCopyArray); // [1, 2, 3]

Sample of array copy using assign method

let originalArray = [1, 2, 3];
let shallowCopyArray = Object.assign([], originalArray);
console.log(shallowCopyArray); // [1, 2, 3]

Sample of array copy using spread operator (…)

let originalArray = [1, 2, 3];
let shallowCopyArray = [...originalArray];
console.log(shallowCopyArray); // [1, 2, 3]

How to copy an array using the close method of the “lodash” library

JavaScript’s lodash library provides methods for deep and shallow copying of objects.

Below is a sample program to deep copy an array.

const _ = require('lodash');

const original = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(original);

console.log(original); // { a: 1, b: { c: 2 } }
console.log(copy); // { a: 1, b: { c: 2 } }

original.a = 2;
original.b.c = 3;

console.log(original); // { a: 2, b: { c: 3 } }
console.log(copy); // { a: 1, b: { c: 2 } }

The above sample cloneDeepuses lodash’s methods to create a deep copy of an object called original. We then compared original and copy and confirmed that changing the properties of original does not affect copy.

Here is a sample program that shallow copies an array.

const original = { a: 1, b: { c: 2 } };
const copy = _.clone(original);

console.log(original); // { a: 1, b: { c: 2 } }
console.log(copy); // { a: 1, b: { c: 2 } }

original.a = 2;
original.b.c = 3;

console.log(original); // { a: 2, b: { c: 3 } }
console.log(copy); // { a: 2, b: { c: 3 } }

The above sample cloneuses lodash’s methods to create a shallow copy of an object called original. We then compared original and copy and confirmed that changing the properties of original also affects copy.

Summary of this article

We explained deep copy and shallow copy of arrays.

I now understand the difference between deep copy and shallow copy when it comes to duplicating arrays in JavaScript!

When duplicating arrays, it is important to choose between deep copy and shallow copy, depending on your needs.

In particular, be sure to use deep copy when duplicating objects or arrays containing arrays.