How to Extend an Existing Array With Another Array[Without Creating a New Array] in JavaScript – Definitive Guide

JavaScript arrays allow you to store multiple elements in a single object.

You can extend an existing array with another array in JavaScript using the array1.push(…array2) statement.

Basic Example

var a = [1, 2];

var b = [3, 4, 5];

a.push(...b);

console.log(a); // [1, 2, 3, 4, 5]

This tutorial teaches you how to extend an existing array with another array in JavaScript and when it is appropriate to use each method.

Using Array Push Method

The push() method add(s) one or more items to the end of the array and returns the new length of the array.

To extend an existing array using the push() method,

  • Invoke the push() method in the first array
  • Pass the elements of the second array by extending them using the spread operator[...]
  • The elements of the second array will be pushed into the first array

Use this method when your first array is large and the second array is small. In this case, the performance is very fast.

Code

var a = [1, 2, 3];

var b = [4, 5];

a.push(...b);

console.log(a); // [1, 2, 3, 4, 5]

Using Apply and Push Method

The apply() method calls the specified function with the given this value.

Use the push() method and apply() when your browser does not support ECMAScript 6.

Code

var a = [1, 2, 3];

var b = [4, 5];

a.push.apply(a, b);

console.log(a); //[1, 2, 3, 4, 5]

Using Concat Method

The concat() method merges two or more arrays into a single array object.

  • It creates a new array object instead of mutating the existing array object.
  • Hence, assign the result to the first array object. This way, the second array objects are concatenated to the first object and stored in the first one.

Use this method when both of your array sizes are large.

Code

var a = [1, 2];

var b = [3, 4, 5];

a = a.concat(b);

console.log(a); //[1, 2, 3, 4, 5]

Using JQuery Merge

The jquery merge() method merges the contents of two arrays into the first array object.

Code

a = [1, 2];

b = [3, 4, 5];

$.merge(a, b);

console.log(a); // [1, 2, 3, 4, 5]

These are the different JavaScript methods to append an array to another array.

Additional Resources

Leave a Comment