Copy Array by Value in JavaScript

Given an Array with elements, the task is to copy the array by value in JavaScript. There are different ways to copy arrays by value in JavaScript.

Understanding Reference vs Value

JavaScript arrays are objects. When assigning an array to another variable, you copy the reference, not the actual array. Modifying one will affect the other.

let arr = [10, 20, 30, 40, 50];
let newArr = arr;

newArr[0] = 5;
console.log(arr); 
// Output: [ 5, 20, 30, 40, 50 ]

1. Using Spread Operator (…)

The spread operator is one of the most popular ways to create a shallow copy of an array. It creates a new array with the same elements.

let arr = [10, 20, 30, 40, 50];
let shallowCopy = [...arr];

shallowCopy[0] = 5;
console.log(arr); // Output: [ 10, 20, 30, 40, 50 ]
console.log(shallowCopy);   // Output: [ 5, 20, 30, 40, 50 ]

Note: Creating a shallow copy means nested objects or arrays are still shared by reference.

2. Using Array slice() Method

The slice() method can be used to create a shallow copy of an array by slicing the entire array.

let arr = [10, 20, 30, 40, 50];
let shallowCopy = arr.slice();

shallowCopy[0] = 5;
console.log(arr); // Output: [ 10, 20, 30, 40, 50 ]
console.log(shallowCopy);   // Output: [ 5, 20, 30, 40, 50 ]

3. Using Array.from() Method

The Array.from() method creates a new array from an iterable or array-like object. It can also be used to copy arrays.

let arr = [10, 20, 30, 40, 50];
let shallowCopy = Array.from(arr);

shallowCopy[0] = 5;
console.log(arr); // Output: [ 10, 20, 30, 40, 50 ]
console.log(shallowCopy);   // Output: [ 5, 20, 30, 40, 50 ]

4. Using concat() Method

The concat() method merges arrays into a new array, making it suitable for copying a single array.

let arr = [10, 20, 30, 40, 50];
let shallowCopy = arr.concat();

shallowCopy[0] = 5;
console.log(arr); // Output: [ 10, 20, 30, 40, 50 ]
console.log(shallowCopy);   // Output: [ 5, 20, 30, 40, 50 ]

5. Using map() for Element Transformation

You can use the map() method to create a shallow copy while optionally transforming elements.

let arr = [10, 20, 30, 40, 50];
let shallowCopy = arr.map(item => item);

shallowCopy[0] = 5;
console.log(arr); // Output: [ 10, 20, 30, 40, 50 ]
console.log(shallowCopy);   // Output: [ 5, 20, 30, 40, 50 ]

Deep Copying Arrays

If the array contains nested objects or arrays, a shallow copy will not suffice. Here are ways to create a deep copy.

1. Using JSON.parse (JSON.stringify())

This method serializes the array into a JSON string and then parses it back into a new array.

let arr = [1, [2, 3], { a: 4 }];
let deepCopy = JSON.parse(JSON.stringify(arr));

deepCopy[1][0] = 5;
console.log(originalArray); // Output: [1, [2, 3], { a: 4 }]
console.log(deepCopy);      // Output: [1, [5, 3], { a: 4 }]

2. Using Libraries

For robust and complex deep copying, libraries like Lodash or Underscore.js provide utility functions.

let _ = require('lodash');

let arr = [1, [2, 3], { a: 4 }];
let deepCopy = _.cloneDeep(arr);

deepCopy[1][0] = 99;
console.log(originalArray); // Output: [1, [2, 3], { a: 4 }]
console.log(deepCopy);      // Output: [1, [99, 3], { a: 4 }]