Create shallow and deep copy of an array in JavaScript
This post will discuss how to create a shallow and deep copy of an array in JavaScript.
With a shallow copy, the values are copied by reference when the array is nested. This means that if the referenced object is changed, the changes are reflected in both the original array and its copy. There are several ways to create a shallow and deep copy of an array in JavaScript. All the functions below copies any nested objects or arrays by reference except the JSON functions, jQuery’s $.extend() function with the first argument set to true, and the Lodash’s _.cloneDeep() function.
1. Using Array.slice() function
The slice() is commonly used built-in function that returns a shallow copy of a portion of an array into a new array object. We can use this function to copy the whole array by omitting the start and end arguments, or specify a range of elements to copy.
|
1 2 3 4 |
const arr = [5, 3, 4, 8, 6]; const copy = arr.slice(); console.log(copy); // [5, 3, 4, 8, 6] |
2. Using Spread operator
The spread operator (…) is a feature of ES6 syntax that allows us to expand an iterable object into individual elements. We can use this operator inside an array literal ([]) to create a new array with the same elements as the original array, while offering the best performance.
|
1 2 3 4 |
const arr = [5, 3, 4, 8, 6]; const copy = [...arr]; console.log(copy); // [5, 3, 4, 8, 6] |
Instead of using the array literal, we can use the spread operator with the Array.of() function, which creates a new Array instance from the expanded sequence of elements.
|
1 2 3 |
const arr = [5, 3, 4, 8, 6]; const copy = Array.of(...arr); console.log(copy); // [5, 3, 4, 8, 6] |
3. Using Array.from() function
The Array.from() is a built-in function that allows us to create a new array from an array-like or iterable object. We can use this function to copy an array by passing it as the first argument. We can also optionally provide a map() function as the second argument to modify the elements of the new array.
|
1 2 3 4 |
const arr = [5, 3, 4, 8, 6]; const copy = Array.from(arr); console.log(copy); // [5, 3, 4, 8, 6] |
4. Using Array.concat() function
The Array.concat() is a built-in function that returns a new array that is the result of merging two or more arrays. We can use this function to copy an array by passing an empty array as the first argument and the original array as the second argument.
|
1 2 3 4 |
const arr = [5, 3, 4, 8, 6]; const copy = [].concat(arr); console.log(copy); // [5, 3, 4, 8, 6] |
We can also use the concat() function in another way. If no parameter is specified, the concat() function returns a shallow copy of the calling array.
|
1 2 3 4 |
const arr = [5, 3, 4, 8, 6]; const copy = arr.concat(); console.log(copy); // [5, 3, 4, 8, 6] |
5. Using Object.assign() or Object.values() function
The Object.assign() is a built-in function that copies the values of all enumerable own properties from one or more source objects to a target object. We can use this function to copy an array by passing an empty array as the target object and the original array as the source object.
|
1 2 3 |
const arr = [5, 3, 4, 8, 6]; const copy = Object.assign([], arr); console.log(copy); // [5, 3, 4, 8, 6] |
The Object.values() is a built-in function that returns an array of the values of the enumerable own properties of an object. We can use this function to extract the values of the array object.
|
1 2 3 |
const arr = [5, 3, 4, 8, 6]; const copy = Object.values(arr); console.log(copy); // [5, 3, 4, 8, 6] |
6. Using Array.map() function
The Array.map() is a built-in function that creates a new array with the results of calling a callback function on every element in the original array. We can use this function to copy the elements of an array by passing an identity function as a callback.
|
1 2 3 |
const arr = [5, 3, 4, 8, 6]; const copy = arr.map(i => i); console.log(copy); // [5, 3, 4, 8, 6] |
7. Using JSON
The JSON.parse() and JSON.stringify() are the built-in functions that convert an object or an array to a JSON string and vice versa. We can use these functions to create a deep copy of an array by first converting it to a JSON string and then parsing it back to an array. This works with any type of value, but it will lose any functions or symbols in the array:
|
1 2 3 4 5 |
const arr = [[1, 2], [3, [4, [5, 6]]]]; deepcopy = JSON.parse(JSON.stringify(arr)); console.log(deepcopy); // [[1, 2], [3, [4, [5, 6]]]] arr[1].pop(); // modify original array console.log(deepcopy); // [[1, 2], [3, [4, [5, 6]]]] |
8. Using jQuery
The $.extend() function from the jQuery library copies the values of all enumerable own properties from one or more source objects to a target object. We can use this function to copy an array by passing an empty array as the target object and the original array as the source object. We can also pass a true value as the first argument to perform a deep copy of nested arrays or objects.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const { JSDOM } = require("jsdom"); const { window } = new JSDOM(); const $ = require("jquery")(window); const arr1 = [[1, 2], [3, [4, [5, 6]]]]; const shallowcopy = $.extend([], arr1); console.log(shallowcopy); // [[1, 2], [3, [4, [5, 6]]]] arr1[1].pop(); // modify original array console.log(shallowcopy); // [[1, 2], [3]] const arr2 = [[1, 2], [3, [4, [5, 6]]]]; deepcopy = $.extend(true, [], arr2); console.log(deepcopy); // [[1, 2], [3, [4, [5, 6]]]] arr2[1].pop(); // modify original array console.log(deepcopy); // [[1, 2], [3, [4, [5, 6]]]] |
9. Using Lodash/Underscore Library
With Lodash library, we can use the _.extend() or _.assign() or _.clone() function to get a shallow copy of an array. These functions work with any type of value, and they can preserve functions and symbols in the array. To duplicate any nested objects or arrays, we should use the _.cloneDeep function instead, which returns a deep copy.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// import lodash library const _ = require('lodash'); const arr1 = [[1, 2], [3, [4, [5, 6]]]]; const shallowcopy = _.clone(arr1); console.log(shallowcopy); // [[1, 2], [3, [4, [5, 6]]]] arr1[1].pop(); // modify original array console.log(shallowcopy); // [[1, 2], [3]] const arr2 = [[1, 2], [3, [4, [5, 6]]]]; deepcopy = _.cloneDeep(arr2); console.log(deepcopy); // [[1, 2], [3, [4, [5, 6]]]] arr2[1].pop(); // modify original array console.log(deepcopy); // [[1, 2], [3, [4, [5, 6]]]] |
The underscore library also offers the _.extend(), and _.clone() function, to create a shallow-copy of the specified object. However, the underscore library currently does not have any function that can perform a deep copy operation on an array.
|
1 2 3 4 5 6 |
// import underscore library const _ = require('underscore'); const arr = [5, 3, 4, 8, 6]; const copy = _.extend(arr); console.log(copy); // [5, 3, 4, 8, 6] |
That’s all about creating a shallow and 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 :)