• 14 Tricks to Copy an Array in JavaScript
  • Original author: Milos Protic
  • The Nuggets translation Project

Array copying is often misunderstood due to a lack of understanding of how JavaScript handles arrays and their elements. Arrays in JavaScript are mutable, which means that after an array is created, its contents can be modified.

This means that to copy an array, we can’t simply assign the old array to a new array variable. If we do this, they will share the same reference, and after changing one variable, the other variable will also be affected. That’s why we need to clone arrays.

Here are some interesting methods and tricks for how we clone arrays.

Note that these methods perform shallow copies… Although in our example we don’t have a deeper object to see it in action.

Option 1 – Use the array. slice method

const numbers = [1.2.3.4.5];

const copy = numbers.slice();
copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 2 – Use the array.map method

const numbers = [1.2.3.4.5];

const copy = numbers.map(num= > num);
copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 3 – Use the array. from method

const numbers = [1.2.3.4.5];

const copy = Array.from(new Set(numbers));
copy.push(6); // Add a new item to prove that we are not modifying the original array.
console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 4 – Use the extension operator

const numbers = [1.2.3.4.5];

const copy = [...numbers];
copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 5 – Use the array. of method with the extension operator

const numbers = [1.2.3.4.5];

const copy = Array.of(... numbers); copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 6 – Use an array constructor with an extension operator

const numbers = [1.2.3.4.5];

const copy = new Array(... numbers); copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 7 – Use deconstruction

const numbers = [1.2.3.4.5];

const [...copy] = numbers;
copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 8 – Use the array. concat method

const numbers = [1.2.3.4.5];

const copy = numbers.concat();
copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 9 – Use the array. push method with the extension operator

const numbers = [1.2.3.4.5];

letcopy = []; copy.push(... numbers); copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 10 – Use the array. unshift method with the extension operator

const numbers = [1.2.3.4.5];

letcopy = []; copy.unshift(... numbers); copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 11 – Use the array.foreach method

const numbers = [1.2.3.4.5];

let copy = [];
numbers.forEach((value) = > copy.push(value));
copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 12 – Use the for loop

const numbers = [1.2.3.4.5];

let copy = [];
for (let i = 0; i < numbers.length; i++) {
    copy.push(numbers[i]);
}
copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 13 – Use array.reduce

It’s possible, but it’s overkill, and you should go with one of the above.

const numbers = [1.2.3.4.5];

const copy = numbers.reduce((acc, x) = > { acc.push(x); returnacc; } []); copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Option 14 – a nostalgic approach – use the Apply method

const numbers = [1.2.3.4.5];

let copy = [];
Array.prototype.push.apply(copy, numbers);
copy.push(6); // Add a new item to prove that we are not modifying the original array.

console.log(copy);
console.log(numbers);

/ / output
// [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5]
Copy the code

Thanks for reading, and I’ll see you in our next article.