Copy a 2-dimensional array in JavaScript
This post will discuss how to create a copy of a two-dimensional array in JavaScript.
A two-dimensional array is an array of arrays, where each sub-array has the same length and represents a row or a column of the array. A copy of an array is a new array that contains the same values as the original array, but does not share any references with it. This means that modifying the copy will not affect the original array, and vice versa. Creating a copy of a two-dimensional array in JavaScript can be useful for various purposes, such as manipulating data, performing calculations, or avoiding side effects. Here are some of the functions that we can use to create a copy of a two-dimensional array in JavaScript:
1. Using slice() function
We can use the slice() function with the map() function to create a shallow copy of the outer array and then create a shallow copy of each sub-array. This function works for simple values, such as numbers, strings, or booleans, but not for complex objects, such as nested arrays or objects with properties and functions. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // create a copy of the outer and inner arrays let copy = arr.slice().map(row => row.slice()); // modify the first element of the first sub-array copy[0][0] = 10; // [[1, 2, 3], [4, 5, 6], [7, 8, 9]] - original array is unchanged console.log(arr); // [[10, 2, 3], [4, 5, 6], [7, 8, 9]] - copy is changed console.log(copy); |
2. Using JSON functions
We can use the JSON.stringify() and JSON.parse() functions to create a deep copy of a two-dimensional array. This function converts the original array to a JSON string and then parses it back to a new array. The syntax is JSON.parse(JSON.stringify(array)), where array is the name of the 2D array to copy. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // create a deep copy of the array using JSON functions let copy = JSON.parse(JSON.stringify(arr)); // modify the first element of the first sub-array copy[0][0] = 10; // [[1, 2, 3], [4, 5, 6], [7, 8, 9]] - original array is unchanged console.log(arr); // [[10, 2, 3], [4, 5, 6], [7, 8, 9]] - copy is changed console.log(copy); |
However, this function has some limitations and drawbacks. It only works for arrays that contain JSON-compatible values, such as numbers, strings, booleans, nulls, objects, and arrays. It does not work for arrays that contain other types of values, such as functions, symbols, dates, regexes, or undefineds. It also does not preserve any custom properties or functions that may be attached to the array or its elements. It may also be inefficient for large or complex arrays.
3. Using Lodash library
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 everything in the original array to the new array. It works for all data types, including functions and symbols that are copied by reference. 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 = [[1, 2, 3], [4, function() {return "hello"}, Symbol("foo")]]; // create a deep copy of the array using Lodash cloneDeep let copy = _.cloneDeep(arr); // modify the first element of the first sub-array copy[0][0] = 10; // [[1, 2, 3], [4, [Function (anonymous)], Symbol(foo)]] console.log(arr); // [[10, 2, 3], [4, [Function (anonymous)], Symbol(foo)]] console.log(copy); |
4. Using spread operator
The spread operator can be used to create a shallow copy of a two-dimensional array by spreading each subarray into a new array literal. This requires ES6 support, which may not be available in some older browsers. The syntax is [...subarray], where subarray is the name of the subarray to spread. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // create a copy of the array let copy = [...arr.map(subarray => [...subarray])]; // modify the first element of the first sub-array copy[0][0] = 10; // [[1, 2, 3], [4, 5, 6], [7, 8, 9]] - original array is unchanged console.log(arr); // [[10, 2, 3], [4, 5, 6], [7, 8, 9]] - copy is changed console.log(copy); |
That’s all about creating a copy of a two-dimensional 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 :)