Skip to main content

How to Add Multiple Elements to an Array in JavaScript

Adding multiple elements to a JavaScript array is a fundamental operation. Whether you're combining two arrays or appending several new items at once, you need an efficient and readable way to do it. Modern JavaScript provides two primary methods for this, depending on whether you want to modify the original array or create a new one.

This guide will teach you how to use the Array.prototype.push() method with spread syntax (...) to add elements to an existing array (mutation). It will also cover the Array.prototype.concat() method for creating a new array with the added elements (immutable).

The Core Problem: Adding More Than One Element​

You have an existing array and a set of new items you want to add to it.

// Problem: How to add 'b', 'c', and 'd' to this array?
const mainArray = ['a'];
const newItems = ['b', 'c', 'd'];

There are two main goals you might have:

  1. Mutate mainArray: Add the new items directly into the mainArray.
  2. Create a New Array: Create a completely new array that contains all the items, leaving mainArray unchanged.

Method 1 (Mutation): push() with Spread Syntax​

The Array.prototype.push() method adds one or more elements to the end of an array and modifies it in place. You can pass multiple arguments to it directly, or, more commonly, use the spread syntax (...) to "unpack" the elements from another array.

Solution: this is the most common and readable way to add multiple items to an existing array.

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

// The spread syntax '...' unpacks the `newItems` array.
// This is equivalent to calling mainArray.push('b', 'c', 'd');
mainArray.push(...newItems);

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

This approach is highly efficient because it modifies the original array directly without creating a new one.

Method 2 (Immutable): concat() or Spread Syntax​

If you want to create a new array without changing the original, you have two excellent, modern options.

Solution A: Using Array.prototype.concat()​

The concat() method is designed specifically for this. It merges two or more arrays and returns a new array.

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

let combinedArray = mainArray.concat(newItems);

console.log(combinedArray); // Output: ['a', 'b', 'c', 'd']
console.log(mainArray);     // Output: ['a'] (The original is unchanged)
note

This is a very clear and explicit way to express your intent to create a new array.

Solution B: Using Spread Syntax in an Array Literal​

This is a more modern and often preferred alternative to concat(). You can construct a new array literal and use the spread syntax to unpack the contents of your existing arrays into it.

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

let combinedArray = [...mainArray, ...newItems];

console.log(combinedArray); // Output: ['a', 'b', 'c', 'd']
console.log(mainArray);     // Output: ['a'] (The original is unchanged)
note

This method is highly readable and flexible, as it makes it easy to add other individual elements as well: const combined = ['start', ...mainArray, ...newItems, 'end'];.

Adding Elements to the Beginning of an Array​

The same patterns apply if you want to add elements to the start of an array.

Method 1 (Mutation): unshift() with Spread Syntax​

The Array.prototype.unshift() method adds one or more elements to the beginning of an array, modifying it in place.

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

mainArray.unshift(...newItems);

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

Method 2 (Immutable): concat() or Spread Syntax​

Simply reverse the order of the arrays.

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

// Using concat()
let combinedArray = newItems.concat(mainArray);

// Using spread syntax
let combinedArray2 = [...newItems, ...mainArray];

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

Conclusion​

Adding multiple elements to an array in JavaScript is a simple task with clear, modern solutions that depend on your goal of mutation vs. immutability.

  • To add elements to an existing array (mutation), the recommended method is array.push(...newItems). Use unshift() to add to the beginning.
  • To create a new array with the added elements (immutable), the best methods are array.concat(newItems) or the modern spread syntax [...array, ...newItems].

Choosing the right method for your specific use case will lead to cleaner, more readable, and more predictable code.

Table of Contents