Skip to main content

How to Append an Array to Another in JavaScript

A fundamental operation in JavaScript is combining two arrays. You might need to merge a list of new items into an existing list, or concatenate several arrays to create a final dataset. The correct method for this depends on a crucial choice: do you want to create a new array, or do you want to modify an existing array in place?

This guide will teach you the modern, standard methods for both of these scenarios. You will learn the best practices for immutable and mutable array operations.

The Core Distinction: Creating a New Array vs. Modifying in Place​

Before combining arrays, you must decide on your approach:

  • Immutable (Creating a New Array): This is the recommended best practice in modern JavaScript. You create a brand new array that contains all the elements from the original arrays. The original arrays are left completely unchanged. This leads to more predictable and less bug-prone code.

  • Mutable (Modifying in Place): This involves adding the elements of a second array directly into the first array, permanently changing it. This can be slightly more performant for very large arrays as it avoids creating a new array, but it should be done intentionally.

If you want to combine arrays without changing the originals, the spread syntax (...) is the most modern, concise, and readable way to do it.

For example, we have two arrays and we want to create a third array that contains all the elements of both.

// Problem: How to combine arr1 and arr2 into a new array?
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

Solution 1: Spread Syntax​

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

// Unpack the elements of both arrays into a new array literal
const combinedArray = [...arr1, ...arr2];

console.log(combinedArray); // Output: ['a', 'b', 'c', 'd']

// The original arrays are not modified
console.log(arr1);          // Output: ['a', 'b']
console.log(arr2);          // Output: ['c', 'd']

Solution 2: concat() Method​

The classic Array.prototype.concat() method also creates a new array and is a perfectly valid alternative.

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

const combinedArray = arr1.concat(arr2);

console.log(combinedArray); // Output: ['a', 'b', 'c', 'd']

Method 2: Appending to an Existing Array (Mutable)​

If you explicitly want to modify an array by adding the elements of another to its end, the Array.prototype.push() method combined with the spread syntax is the cleanest way.

For example, we have a main array and we want to add all the elements from a second array into it.

// Problem: How to add the elements of newItems into mainList?
let mainList = ['a', 'b'];
const newItems = ['c', 'd'];

Solution:

let mainList = ['a', 'b'];
const newItems = ['c', 'd'];

// The spread syntax unpacks newItems as individual arguments to push()
mainList.push(...newItems);

console.log(mainList); // Output: ['a', 'b', 'c', 'd']
note

Important: This method mutates the mainList array. The original mainList is now permanently changed.

Conclusion: Which Method Should You Use?​

The choice between these methods is a decision between immutability and mutability.

  • You should almost always prefer the immutable approach by creating a new array with the spread syntax ([...arr1, ...arr2]) or concat(). This is the standard in modern JavaScript (especially in frameworks like React) because it leads to more predictable and maintainable code.
  • Use the mutable push() method only when you have a specific reason to modify the original array, such as for performance optimizations on very large arrays or when working with legacy code that expects mutation.

Table of Contents