Get a deep copy of an array in JavaScript
This post will discuss how to get a deep copy of an array in JavaScript.
Getting a deep copy of an array in JavaScript means creating a new array that contains the same values as the original array, but does not share any references with it. This way, modifying the new array will not affect the original array, and vice versa. There are several ways to get a deep copy of an array in JavaScript, depending on the type and complexity of the array elements. Here are some of the common functions:
1. Using JSON object functions
If the array elements are complex objects, such as nested arrays or objects with properties and functions, we can the JSON object functions to create a deep copy of the array. We can use JSON.stringify() converts the original array into a JSON string, and JSON.parse() converts the JSON string back into an array. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let arr = [{name: "Joseph", age: 25}, {name: "Jack", age: 40}]; // using JSON functions let copy = JSON.parse(JSON.stringify(arr)); // modifying the name property of the first element of copy copy[0].name = "Lucas"; // [{name: "Joseph", age: 25}, {name: "Jack", age: 40}] - original array is unchanged console.log(arr); // [{name: "Lucas", age: 25}, {name: "Jack", age: 40}] - copy is changed console.log(copy); |
Above example use the JSON object functions to create a deep clone of an array. This works well for simple arrays that only contain primitive values (numbers, strings, booleans) or nested arrays. However, this function only works if the array elements are compatible with the JSON format, which means they cannot contain functions, symbols, dates, or other non-serializable values. These values will be either lost or converted to strings. Here’s an example:
|
1 2 3 4 5 6 7 |
const arr = [1, 2, 3, {a: 4, b: 5}, () => console.log('Hello'), Symbol('foo'), new Date()]; // deep clone using JSON functions const copy = JSON.parse(JSON.stringify(arr)); // [1, 2, 3, {a: 4, b: 5} null, null, "2020-04-06T11:54:03.000Z"] console.log(copy); |
2. Using structuredClone() function
This is a modern way to deep copy an array in JavaScript that supports more data types than the JSON object functions. The structuredClone() function creates a structured clone of the array, which means it preserves the internal structure and references of the original array. This works well for arrays that contain complex objects, such as dates, maps, sets, including functions and symbols. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const arr = [1, 2, 3, [4, 5], new Date()]; // deep clone const copy = structuredClone(arr); // [1, 2, 3, [4, 5], Fri Sep 23 2020 05:25:03 GMT+0000 (Coordinated Universal Time)] console.log(copy); // change a nested value copy[3][0] = 6; // 4, original array is not affected console.log(arr[3][0]); // true, date is preserved console.log(copy[4] instanceof Date); |
However, this function is not widely supported by all browsers yet. We can use the structuredClone() function to deep clone any type of array in modern browsers.
|
1 2 3 4 5 6 7 |
const arr = [1, 2, 3, {a: 4, b: 5}, () => console.log('Hello')]; // deep clone const clone = structuredClone(arr); // [1, 2, 3, {a: 4, b: 5}, => console.log('Hello')] console.log(clone); |
3. Using Lodash library
If the array elements are not compatible with the JSON format, or if we want a more robust and efficient solution, we can use a third-party library like Lodash to create a deep copy of the array. Lodash provides the _.cloneDeep() function that recursively clones the array and its nested values. It also handles circular references and custom cloning logic. This requires importing the Lodash library into our project. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// import the Lodash library const _ = require('lodash'); let arr = [{name: "Joseph", age: 25}, {name: "Jack", age: 40}]; // using Lodash cloneDeep let copy = _.cloneDeep(arr); // modifying the name property of the first element of copy copy[0].name = "Lucas"; // [{name: "Joseph", age: 25}, {name: "Jack", age: 40}] - original array is unchanged console.log(arr); // [{name: "Lucas", age: 25}, {name: "Jack", age: 40}] - copy is changed console.log(copy); |
This function will recursively clone everything in the original array to the new array, including functions and symbols that are copied by reference. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 |
// import the Lodash library const _ = require('lodash'); // array with functions, symbols, and date const arr = [1, 2, 3, () => console.log('Hello'), Symbol('foo'), new Date()]; // deep clone const clone = _.cloneDeep(arr); // [1, 2, 3, [Function (anonymous)], Symbol('foo'), 2020-09-26T06:35:54.545Z] console.log(clone); |
4. Using slice() function
If the array elements are simple values, such as numbers, strings, or booleans, we can use the slice() function or the spread operator (…) to create a shallow copy of the array, which will also work as a deep copy in this case. In the below example, arr.slice() returns a new array with the same elements as the original array. This creates a shallow copy of the original array, but since the elements are primitive values, it effectively creates a deep copy.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
let arr = [1, 2, 3]; // using slice let copy1 = arr.slice(); // using spread operator let copy2 = [...arr]; // modifying the first element of copy1 copy1[0] = 4; // [1, 2, 3] - original array is unchanged console.log(arr); // [4, 2, 3] - copy1 is changed console.log(copy1); // [1, 2, 3] - copy2 is unchanged console.log(copy2); |
That’s all about getting a deep copy of an array in JavaScript.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)