How to append an array to an existing JavaScript Array?

If you want to use jQuery, there is $.merge()

Example:

a = [1, 2];
b = [3, 4, 5];
$.merge(a,b);

Result: a = [1, 2, 3, 4, 5]

You should use a loop-based technique. Other answers on this page are slower and can even fail for large arrays (e.g. DzinX's push.apply method - see full explanation below). The fastest implementation I have found is:

Array.prototype.extend = function (other_array) {
    /* you should include a test to check whether other_array really is an array */
    other_array.forEach(function(v) {this.push(v)}, this);    
}

For a comparison with other answers on this page check out this jsperf. On my machine the above implementation is 10x faster than the other implementations in Firefox (v24), and, in Chrome (v29), about 50% faster than the other implementations!

Additionally, DzinX's answer (using push.apply), fails when the array that we are appending is large (tests show that for me large is > 150000 entries approx in Chrome, and > 500000 entries in Firefox). You can see this error occurring in this jsperf.

An error occurs because the call stack size is exceeded when 'Function.prototype.apply' is called with a large array as the second argument. (The MDN has a note on the dangers of exceeding call stack size using Function.prototype.apply - see the section titled "apply and built-in functions")

The best solution is to use a for loop. I found that a forEach-based loop is faster than all other methods (on the browsers I have tested)... Check out this jsperf so that you can test this for yourself.

By the way, do not be tempted (as I was!) to further shorten the forEach implementation to:

Array.prototype.extend = function (array) {
    array.forEach(this.push, this);    
}

because this produces garbage results! Why? Because Array.prototype.forEach provides 3 arguments to the function it calls - these are: (element_value, element_index, source_array). All of these will be pushed onto your first array for every iteration of forEach if you use "forEach(this.push, this)"!

Combining the answers...

Array.prototype.extend = function(array) {
    if (array.length < 150000) {
        this.push.apply(this, array)
    } else {
        for (var i = 0, len = array.length; i < len; ++i) {
            this.push(array[i]);
        };
    }  
}

i like the "a.push.apply(a, b)" method described above, and if you want you can always create a library function like this:

Array.prototype.append = function(array)
{
    this.push.apply(this, array)
}

and use it like this

a = [1,2]
b = [3,4]

a.append(b)

It is possible to do it using splice():

b.unshift(b.length)
b.unshift(a.length)
Array.prototype.splice.apply(a,b) 
b.shift() // restore b
b.shift() //

But despite being uglier it is not faster than push.apply, at least not in Firefox 3.0. Posted for completeness sake.