Clone Arrays with JavaScript
Believe it or not, there are reasons we use JavaScript frameworks outside of animations and those sexy accordions that people can't do without. The further you get into high-powered JavaScript applications (assuming you're creating true web applications, not websites), the more the need for basic JavaScript functionalities; i.e. JavaScript utilities that have nothing to do with DOM. One of those basic utilities is the ability to clone an array. Quite often I see developers iterating over array items to create their clone; in reality, cloning an array can be as easy as a slice!
The JavaScript
To clone the contents of a given array, all you need to do is call slice, providing 0 as the first argument:
var clone = myArray.slice(0);
The code above creates clone of the original array; keep in mind that if objects exist in your array, the references are kept; i.e. the code above does not do a "deep" clone of the array contents. To add clone as a native method to arrays, you'd do something like this:
Array.prototype.clone = function() {
return this.slice(0);
};
And there you have it! Don't iterate over arrays to clone them if all you need is a naive clone!
This is a great tip! so worth it!
Interesting tip!
Just to note, I use .slice() all the time without passing in ‘zero’ and have never seen an issue. So even though the MDN docs do not say it is optional, it appears to work just fine with no arguments :)
It is also much faster, especially for large arrays. Here’s a benchmark I put together:
http://jsperf.com/loop-vs-slice-copy/3
What is the differences between clonearr=originalarr and clonearr=originalarr.slice(0) ?
I don’t understand, why not use clone = myArray?
Mesuutt and Jonathan: doing cloneArr = originalArr will only copy the pointer of the array and not clone it:
var a = [1,2,3]; // a.length == 3
b = a; // a.length == 3 and b.length == 3
b.push(4); // a.length == 4 and b.length == 4
Another great feature of the slice function is that you can use it to convert array like objects (such as node lists and the arguments object) to real arrays using Array.prototype.slice.call :)
thanks @stefan, I understand exactly now :)
There’s a subtle bug that can result from adding something to the prototype of Array. If you iterate over arrays with using
for...inconstruct:var a = [3,7,9];
for (var i in a) {
console.log(i);
}
Note that the for loop will also iterate over the case when i == “clone”!
To be safe, you must iterate by using the length property:
for (var i=0; i<a.length; i++) {
console.log(i);
}
Take note: if your array is filled with objects, those objects remain linked:
var aAll = [{x:0, y:0}, {x:1, y:1}],
aAll1 =aAll.slice(0);
console.log(aAll[0].x, aAll1[0].x); // 0, 0
aAll1[0].x += 10
console.log(aAll[0].x, aAll1[0].x); // 10, 10
aAll1[0] = {};
console.log(aAll[0].x, aAll1[0].x); // 10, undefined
So what if I need to create a clone of an array filled with objects? I cannot have the objects to be by reference in the clone. Iteration my only option?