32

I want to push all individual elements of a source array onto a target array,

target.push(source);

puts just source's reference on the target list.

In stead I want to do:

for (i = 0; i < source.length; i++) {
    target.push(source[i]);
}

Is there a way in javascript to do this more elegant, without explicitly coding a repetition loop?

And while I'm at it, what is the correct term? I don't think that "flat push" is correct. Googling did not yield any results as source and target are both arrays.

Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
dr jerry
  • 9,768
  • 24
  • 79
  • 122
  • So you want it to behave like Perl? Perl's flattening of arguments is often a pain, but sometimes very convenient. And yes, in Perl at least it's indeed called "flatten" – bart Oct 24 '10 at 10:11
  • 1
    Does this answer your question? [How to extend an existing JavaScript array with another array, without creating a new array](//stackoverflow.com/q/1374126/90527) – outis May 28 '22 at 18:17

4 Answers4

61

apply does what you want:

var target = [1,2];
var source = [3,4,5];

target.push.apply(target, source);

alert(target); // 1, 2, 3, 4, 5

MDC - apply

Calls a function with a given this value and arguments provided as an array.

gblazex
  • 49,155
  • 12
  • 98
  • 91
  • 3
    +1 In cases where you must keep the reference to the original array, this is the best solution. You can then create a method that extend the prototype of arrays like that: Array.prototype.pushAll = function (items) { Array.prototype.push.apply(this, items); }; – Samuel May 02 '14 at 19:41
  • Can you explain how its better than the concat, concat also retains reference. – Noitidart May 04 '14 at 11:04
  • 2
    When you read the description of concat method in javascript: "This method does not change the existing arrays, but returns a new array, containing the values of the joined arrays." They say : "a new array is returns..." In this case, if you try to modify the array of an api, in my case JQuery form plugin in the beforeSubmit event to add new items, if you use concat, you will create a new array and if you try to replace the existing array with the new one, the api will not be notified about this change. – Samuel May 05 '14 at 13:11
  • For deeper explanation: here is a little bit of code (Sorry for the formatting): var arr = []; arr.push({ name: 'samuel' }); add(arr, 'john'); console.log(arr.length); function add(arr, newItem){ var newArr = []; newArr.push({ name: newItem }); arr = arr.concat(newArr); } In this case, the solution of galambalazs will produce a length of 2 compared to concat that will produce 1. – Samuel May 05 '14 at 13:32
31

The easier way to do this. 

   var arr1 = [1,2,3] 
   var arr2 = [4,5,6] 
   arr1.push(...arr2) //arr1 now contains [1,2,3,4,5,6]
kiran puppala
  • 689
  • 8
  • 17
25

You could use the concat method:

var num1 = [1, 2, 3];  
var num2 = [4, 5, 6];  
var num3 = [7, 8, 9];  

// creates array [1, 2, 3, 4, 5, 6, 7, 8, 9]; num1, num2, num3 are unchanged  
var nums = num1.concat(num2, num3);
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
8

You can simply use spread syntax:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2];
    // [0, 1, 2, 3, 4, 5]

Alternatively:

var arr1 = ['a', 'b', 'c'];
var arr2 = [1, 2, 3, ...arr1];
        // [1, 2, 3, 'a', 'b', 'c']

Demo:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2];
console.log(arr1);
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95