Coder Perfect

Array items are copied into another array.


I’ve got a JavaScript array dataArray that I’d like to copy into a new array newArray. I don’t want newArray[0] to be a dataArray, though. I’d like to add all of the objects to the new array:

var newArray = [];

// ...

or even better:

var newArray = new Array (
   // ... where values() (or something equivalent) would push the individual values into the array, rather than the array itself

As a result, the new array now has all of the values from the various data arrays. Is there a shortcut like pushValues that I can use instead of iterating over each dataArray and adding the elements one by one?

Asked by bba

Solution #1

Use the concatenation function as follows:

var arrayA = [1, 2];
var arrayB = [3, 4];
var newArray = arrayA.concat(arrayB);

[1, 2, 3, 4] will be the value of newArray (arrayA and arrayB remain unchanged; concat creates and returns a new array for the result).

Answered by WiseGuyEh

Solution #2

Because it has several parameters, you can use its apply() method to pass an array of values as a list of function parameters. This has the advantage of adding elements to the array in place rather than creating a new array, as concat() does.

However, it appears that this approach may fail for large arrays (those with 100,000 or more elements). A loop is a preferable approach for such arrays. Details can be found at

var newArray = [];
newArray.push.apply(newArray, dataArray1);
newArray.push.apply(newArray, dataArray2);

You might wish to make a function out of this:

function pushArray(arr, arr2) {
    arr.push.apply(arr, arr2);

…or add it to the prototype of Array:

Array.prototype.pushArray = function(arr) {
    this.push.apply(this, arr);

var newArray = [];

…or you can imitate the original push() method by utilizing the fact that concat(), like push(), accepts multiple parameters:

Array.prototype.pushArray = function() {
    this.push.apply(this, this.concat.apply([], arguments));

var newArray = [];
newArray.pushArray(dataArray1, dataArray2);

Here’s a looped version of the previous example that works with big arrays and all major browsers, including Internet Explorer 8:

Array.prototype.pushArray = function() {
    var toPush = this.concat.apply([], arguments);
    for (var i = 0, len = toPush.length; i < len; ++i) {

Answered by Tim Down

Solution #3

The Spread syntax is available in ECMAScript 6:

All major browsers support the Spread syntax (that excludes IE11). See this (constantly updated) compatibility table for the most up-to-date information.

However, for more on performance, read Jack Giffin’s response below. It appears that concat is still superior to the spread operator in terms of performance and speed.

Answered by 7 revs, 6 users 43%

Solution #4

MDN provided an elegant solution.

var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// Merge the second array into the first one
// Equivalent to vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']

Alternatively, you can use ES6’s spread operator:

let fruits = [ 'apple', 'banana'];
const moreFruits = [ 'orange', 'plum' ];

fruits.push(...moreFruits); // ["apple", "banana", "orange", "plum"]

Answered by Believe2014

Solution #5

To me, the following appears to be the most straightforward:

var newArray = dataArray1.slice();
newArray.push.apply(newArray, dataArray2);

You can use the apply method of the push function to push all of the members of another array because “push” takes a variable number of arguments. It creates a push call with the first parameter (“newArray” here) as “this” and the array’s elements as the remaining arguments.

You don’t edit the first array because the slice in the first statement gets a copy of it.

Update If you’re using a javascript version that supports slice, you can reduce the push expression to:


Answered by shaunc

Post is based on