How to extend an existing JavaScript array with another array without creating a new array

Question

There doesn t seem to be a way to extend an existing JavaScript array with another array  i e  to emulate Python s extend method   I want to achieve the following    gt  gt  gt  a    1  2   1  2   gt  gt  gt  b    3  4  5   3  4  5   gt  gt  gt  SOMETHING HERE  gt  gt  gt  a  1  2  3  4  5    I know there s a a concat b  method  but it creates a new array instead of simply extending the first one  I d like an algorithm that works efficiently when a is significantly larger than b  i e  one that does not copy a    Note  This is not a duplicate of How to append something to an array  -- the goal here is to add the whole contents of one array to the other  and to do it  in place   i e  without copying all elements of the extended array

User · Answer

You can create a polyfill for extend as I have below. It will add to the array; in-place and return itself, so that you can chain other methods.

_x000D_

if (Array.prototype.extend === undefined) {_x000D_
  Array.prototype.extend = function(other) {_x000D_
    this.push.apply(this, arguments.length > 1 ? arguments : other);_x000D_
    return this;_x000D_
  };_x000D_
}_x000D_
_x000D_
function print() {_x000D_
  document.body.innerHTML += [].map.call(arguments, function(item) {_x000D_
    return typeof item === 'object' ? JSON.stringify(item) : item;_x000D_
  }).join(' ') + '\n';_x000D_
}_x000D_
document.body.innerHTML = '';_x000D_
_x000D_
var a = [1, 2, 3];_x000D_
var b = [4, 5, 6];_x000D_
_x000D_
print('Concat');_x000D_
print('(1)', a.concat(b));_x000D_
print('(2)', a.concat(b));_x000D_
print('(3)', a.concat(4, 5, 6));_x000D_
_x000D_
print('\nExtend');_x000D_
print('(1)', a.extend(b));_x000D_
print('(2)', a.extend(b));_x000D_
print('(3)', a.extend(4, 5, 6));

_x000D_

body {_x000D_
  font-family: monospace;_x000D_
  white-space: pre;_x000D_
}

_x000D_

User · Answer

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

User · Answer

The answer is super simple    gt  gt  gt  a    1  2   1  2   gt  gt  gt  b    3  4  5   3  4  5   gt  gt  gt  SOMETHING HERE  The following code will combine the two arrays    a   a concat b     gt  gt  gt  a  1  2  3  4  5    Concat acts very similarly to JavaScript string concatenation  It will return a combination of the parameter you put into the concat function on the end of the array you call the function on  The crux is that you have to assign the returned value to a variable or it gets lost  So for example  a concat b     lt --- This does absolutely nothing since it is just returning the combined arrays  but it doesn t do anything with it

User · Answer

First a few words about apply   in JavaScript to help understand why we use it      The apply   method calls a function with a given this value  and   arguments provided as an array    Push expects a list of items to add to the array  The apply   method  however  takes the expected arguments for the function call as an array  This allows us to easily push the elements of one array into another array with the builtin push   method   Imagine you have these arrays     var a    1  2  3  4   var b    5  6  7     and simply do this   Array prototype push apply a  b     The result will be   a    1  2  3  4  5  6  7     The same thing can be done in ES6 using the spread operator         like this   a push    b     a    1  2  3  4  5  6  7      Shorter and better but not fully supported in all browsers at the moment   Also if you want to move everything from array b to a  emptying b in the process  you can do this   while b length      a push b shift          and the result will be as follows   a    1  2  3  4  5  6  7   b

User · Answer

Combining the answers     Array prototype extend   function array        if  array length  lt  150000            this push apply this  array        else           for  var i   0  len   array length  i  lt  len    i                this push array i

User · Answer

I feel the most elegant these days is   arr1 push    arr2     The MDN article on the spread operator mentions this nice sugary way in ES2015  ES6       A better push      Example  push is often used to push an array to the end of an existing   array  In ES5 this is often done as   var arr1    0  1  2   var arr2    3  4  5      Append all items from arr2 onto arr1 Array prototype push apply arr1  arr2         In ES6 with spread this becomes   var arr1    0  1  2   var arr2    3  4  5   arr1 push    arr2      Do note that arr2 can t be huge  keep it under about 100 000 items   because the call stack overflows  as per jcdude s answer

User · Answer

The  push method can take multiple arguments  You can use the spread operator to pass all the elements of the second array as arguments to  push    gt  gt  gt  a push    b    If your browser does not support ECMAScript 6  you can use  apply instead    gt  gt  gt  a push apply a  b    Or perhaps  if you think it s clearer    gt  gt  gt  Array prototype push apply a b    Please note that all these solutions will fail with a stack overflow error if array b is too long  trouble starts at about 100 000 elements  depending on the browser   If you cannot guarantee that b is short enough  you should use a standard loop-based technique described in the other answer

User · Answer

You can do that by simply adding new elements to the array with the help of the push   method   x000D   x000D  let colors     Red    Blue    Orange    console log  Array before push      colors      append new value to the array colors push  Green    console log  Array after push       colors   x000D   x000D   x000D   Another method is used for appending an element to the beginning of an array is the unshift   function  which adds and returns the new length  It accepts multiple arguments  attaches the indexes of existing elements  and finally returns the new length of an array   x000D   x000D  let colors     Red    Blue    Orange    console log  Array before unshift      colors      append new value to the array colors unshift  Black    Green    console log  Array after unshift       colors   x000D   x000D   x000D   There are other methods too  You can check them out here

User · Answer

You should use a loop-based technique  Other answers on this page that are based on using  apply can fail for large arrays   A fairly terse loop-based implementation 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       You can then do the following   var a    1 2 3   var b    5 4 3   a extend b     DzinX s answer  using push apply  and other  apply based methods fail when the array that we are appending is large  tests show that for me large is   150 000 entries approx in Chrome  and   500 000 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   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     For a speed comparison with other answers on this page  check out this jsperf  thanks to EaterOfCode   The loop-based implementation is similar in speed to using Array push apply  but tends to be a little slower than Array slice apply   Interestingly  if the array you are appending is sparse  the forEach based method above can take advantage of the sparsity and outperform the  apply based methods  check out this jsperf if you want to 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 three 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

User · Answer

Update 2018  A better answer is a newer one of mine  a push    b   Don t upvote this one anymore  as it never really answered the question  but it was a 2015 hack around first-hit-on-Google       For those that simply searched for  JavaScript array extend  and got here  you can very well use Array concat   var a    1  2  3   a   a concat  5  4  3      Concat will return a copy the new array  as thread starter didn t want  But you might not care  certainly for most kind of uses this will be fine      There s also some nice ECMAScript 6 sugar for this in the form of the spread operator   const a    1  2  3   const b       a  5  4  3      It also copies

User · Answer

This solution works for me  using the spread operator of ECMAScript nbsp 6     x000D   x000D  let array     my    solution    works    x000D  let newArray       x000D  let newArray2       x000D  newArray push    array      Adding to same array x000D  newArray2 push     array       Adding as child leaf sub-array x000D  console log newArray   x000D  console log newArray2   x000D   x000D   x000D

User · Answer

Super simple  does not count on spread operators or apply  if that s an issue  b map x   gt  a push x     After running some performance tests on this  it s terribly slow  but answers the question in regards to not creating a new array   Concat is significantly faster  even jQuery s   merge   whoops it  https   jsperf com merge-arrays19b 1

User · Answer

Another solution to merge more than two arrays  var a    1  2       b    3  4  5       c    6  7       Merge the contents of multiple arrays together into the first array var mergeArrays   function      var i  len   arguments length   if  len  gt  1      for  i   1  i  lt  len  i          arguments 0  push apply arguments 0   arguments i                Then call and print as   mergeArrays a  b  c   console log a    Output will be  Array  1  2  3  4  5  6  7

User · Answer

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

User · Answer

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

User · Answer

Use Array extend instead of Array push for    150 000 records   if   Array prototype extend      Array prototype extend   function arr        if   Array isArray arr           return this             for  let record of arr          this push record              return this

[javascript] How to extend an existing JavaScript array with another array, without creating a new array

Examples related to javascript

Examples related to arrays

Examples related to concatenation