Cloning JavaScript Array in Multiple Ways

There are lots of different ways to clone JavaScript Array. In this article, I will list the most prominent and fastest ways to clone an Array .

Different ways to clone a JavaScript Array

• ES6 Spread operator
• Slice
• Concat
• Array.apply
• Array.from
• Array map
• Using loop index
• Push using loop
• Using unshift
• Serialising then de-serialising

ES6 Spread operator

The spread operator was introduced as a feature in ES6. This mehtod expands current array in a new array effectively cloning the current array. Currently, if you are using ES6, this option is the fastest to clone an array on browser like Chrome. However, this may behave differently for different browsers.

var obj2 = [...testArray];

Slice

For a long time this has been the most used and the fastest way to clone an array. Slice should still be your preferred way to clone an array if your target users may be using various browsers.

var obj2 = testArray.slice();

Concat

Another way to achieve cloning in JavaScript is to just create an empty array and then concat the current array to it. This way of cloning is average in terms of performance and results in a shallow copy. There is barely any advantage of choosing this method over others.

var obj2 = [].concat(testArray);

Array apply

You can also use some of the other methods available for arrays to clone a JavaScript Array. Using apply is one such way. Just passing the current as the second argument will result in a shallow clone of the current array.

var obj2 = Array.apply(undefined, testArray);

Array from

Array.from, which is used to return a new, shallow-copied Array instance from an array like iterable object which can also be used to clone an existing array. Depending on your browser this may not be best suited as it can hinder the performance.

var obj2 = Array.from(testArray);

Array map

The map method can also be used to iterate over the current array and return the values one by one. Depending on your browser this may also be not suited method when it comes to performance for cloning.

var obj2 = Array.apply(undefined, testArray);

Using loop index

This is the simplest way to clone an array for beginners. Just create a simple loop and add use the index to retrieve and then insert values from the array into a new array.

var obj2 = new Array(testArray.length);
for (var i = 0, l = testArray.length; i < l; i++) {
  obj2[i] = testArray[i];
}

Push using loop

This is similar to using the loop index, except that you push the data obtained from the current array using loop index and pushing it in to a new empty array.

var obj2 = [];
for (var i = 0, l = testArray.length; i < l; i++) {
  obj2.push(testArray[i]);
}

Using unshift

Using unshift to clone a JavaScript array is by far the worst when it comes to performance. This is because unlike push which just adds new values at the end of the array, unshift adds new values at the start of the cloned array and moves all the existing values to the next position.

var obj2 = [];
for (var i = testArray.length; i--;) {
  obj2.unshift(testArray[i]);
}

Serialising then de-serializing

To achieve deep cloning we can convert the array into a string using JSON.stringify and then parse it back using JSON.parse. As expected, serializing and de-serializing takes time so this is by far the worse in terms of performance.

var obj2 = JSON.parse(JSON.stringify(testArray));

Conclusion

As we can see, there are multiple ways to clone a JavaScript array. Each method has their own benefits and drawbacks. Thus, you should select the one that suites you the best. If you want to check the performance yourself, you can do it here. You can also achieve cloning using other utility libraries like lodash. Depending on your browser, these may hinder the performance due to additional overhead. Let me know in the comments below if you want to know more about it.

The post Cloning JavaScript Array in Multiple Ways appeared first on Atyantik Technologies.