w3docs logo
  1. Snippets
  2. JavaScript
  3. How to Extend an Existing JavaScript Array with Another Array Without Creating a New Array

How to Extend an Existing JavaScript Array with Another Array Without Creating a New Array

There are multiple widely used methods that will extend an existing JavaScript Array with another one without creating a new Array. This tutorial will help you resolve this issue right away.

push()

The push() method is generally used to push an array to the end of an existing one. In ES5 specification, this is often done as follows:

w3docs logo JavaScript push method
let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; // Append all items from arr2 onto arr1 Array.prototype.push.apply(arr1, arr2) console.log(arr1);

If your browser supports ES6, you can use the spread operator:

w3docs logo JavaScript push method
let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1.push(...arr2); console.log(arr1);

The push() method can take more than one parameters, so you can use the apply() method for passing the array of values to be pushed as a list of function parameters:

w3docs logo JavaScript function when you have its name as a string
let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1.push.apply(arr1, arr2) console.log(arr1);

concat()

You can use the concat() method to extend an existing array in JavaScript:

w3docs logo JavaScript concat method
let num1 = [1, 3, 8]; let num2 = [2, 5]; num1 = num1.concat(num2); console.log("new numbers are : " + num1);

Beware of using the concat() method which returns a new array instead of changing the existing array containing the values of the merged arrays. However, it is also technically right for this particular situation.

Do you find this helpful?