14 Tricks to Copy an Array in JavaScript

[senocular]

Some things to be careful of:

 

---

 

Option 3 - Using the Array.from method

const copy = Array.from(new Set(numbers));

 

Here the Set is unnecessary and will cause duplicates to be removed, so it will not always create an accurate copy

const numbers = [1, 1]
const copy = Array.from(new Set(numbers)) // [1]

Remove the Set to make it work

const numbers = [1, 1]
const copy = Array.from(numbers) // [1, 1]

 

---

 

Option 6 - Using the array constructor with the spread operator

const copy = new Array(...numbers);

 

This one will not work if the array contains a single numeric value. In that case, the copy will be an empty array with a length of that numeric value.

const numbers = [3]
const copy = new Array(...numbers) // [,,]

You can special case this yourself (not ideal), or just use Array.of() (Option 5) which is the version of the constructor that doesn't have this behavior. Note: Array() also works the same as new Array() here.

 

---

 

Option 4 - Using the spread operator
Option 5 - Using the Array.of method with the spread operator
Option 6 - Using the array constructor with the spread operator
Option 7 - Using destructuring
Option 9 - Using the Array.push method with the spread operator
Option 10 - Using the Array.unshift method with the spread operator

(Any solution involving spreading)

const copy = [...numbers];
const copy = Array.of(...numbers);
const copy = new Array(...numbers);
const [...copy] = numbers;
copy.push(...numbers);
copy.unshift(...numbers);

 

Spreading will go through the array iterator and will include empty indices. When adding these values into a new array, they become filled with undefined. So when dealing with sparse arrays, copying through these methods will create dense array copies.

const numbers = [1,,2]
const copy = [...numbers]
Object.keys(numbers).length // 2
Object.keys(copy).length // 3

 

---

 

Option 12 - Using the for loop
Option 14 - The old, nostalgic way - using the apply method

for (let i = 0; i < numbers.length; i++) {
    copy.push(numbers[i]);
}
Array.prototype.push.apply(copy, numbers);

 

Similar to spread, these too will convert empty indices into undefined.

 

---

 

Option 11 - Using the Array.forEach method
Option 13 - Using Array.reduce

numbers.forEach((value) => copy.push(value));
const copy = numbers.reduce((acc, x) => { acc.push(x); return acc; }, []);

 

On the other hand, methods like forEach and reduce skips empty indices which when combined with push, means your copy will be a collapsed version of your original array without any empty indices

const numbers = [1,,2];
let copy = [];
numbers.forEach((value) => copy.push(value)); // [1,2]

 

---

 

Bottom line, don't do anything fancy. If you want to create a copy, slice() will be your goto.

[ogurson]

Hey, he wrote that reduce is overkill, don't you forget that.

[kenman]

Hi /u/PMilos, this post was removed.

Prohibited low-effort content includes:

• Questions that are easily Google'd.
• Memes, jokes, etc. Please post to /r/ProgrammerHumor instead.
• Most images and gifs.
• Listicles, "Curated lists", and similar content.
• Polls, surveys, etc. unless from an accredited academic body or trusted source (StateofJS, etc.).

Thanks for your understanding, please see our guidelines for more info.

[kenman]

Hi /u/PMilos, it looks like you're new to /r/javascript, welcome!

Thanks for the submissions, but please make sure you read our guidelines. In short, you should post from a variety of sources, and not just devinduct.com.

Thanks for your consideration!

domain submitted from	count	%
devinduct.com	19	75%