How To Push Multiple Elements To An Array In JavaScript – Definitive Guide

Arrays allow you to store multiple items in a single object. Arrays preserve item insertion order.

You can push multiple elements to an array in JavaScript using the arr.push(‘item1’, ‘item2’) statement.

This tutorial teaches you how to push multiple elements to an array in JavaScript using the different methods and when it is appropriate to use each method.

If You’re in Hurry…

You can use the array.push() method to push multiple elements to an array in JavaScript.

const arr = ['A'];

arr.push('B', 'C', 'D');

console.log(arr); 

Output

The new elements are pushed to the end of the array, and it looks like the following.

['A', 'B', 'C', 'D']

If You Want to Understand Details, Read on…

There are different methods to push multiple elements to an array in JavaScript. Read on to understand each method in detail.

Using Array Push Method

The array.push() method allows you to push multiple values into the end of the array.

push() is a mutating method. It changes the length of the array and the content of the array.

You can use this method when you want to just add elements at the end of the array.

Parameters

It accepts one or more elements as a parameter, and pushes them into the array.

Returns

It returns the new length of the array.

Code

The following code demonstrates how to add multiple elements to an array in JavaScript.

  • First, an array is created with a single element
  • Then, using the push() method, three new elements are pushed to the array. These elements are pushed to the end of the array
const arr = ['A'];

arr.push('B', 'C', 'D');

console.log(arr); 

Output

The new elements are pushed to the end of the array, and it looks like the following.

['A', 'B', 'C', 'D']

Using Array Splice Method

The array.splice() method allows you to change the array by removing or replacing the existing elements.

You can also add multiple elements at the end without removing any existing elements.

You can use this method when you want to replace items in an array by adding new elements.

Parameters

  • start – Index at which you want to start changing the array by removing or replacing the item
  • delete count – A number of items you want to delete from the start index
  • item- 1,..item - n – Items to add in the array

Returns

It returns an array containing the deleted elements.

Code

The following code demonstrates how to add multiple elements to an array in JavaScript using the splice() method.

  • First, an array is created with a single element
  • Then, using the splice() method, three new elements are pushed to the array. These elements are pushed to the end of the array because the start index is arr.length, and the number of elements to delete is mentioned as 0.
const arr = ['A'];

arr.splice(arr.length, 0, 'B', 'C', 'D');

console.log(arr); 

Output

The new items are added to the end of the array.

['A', 'B', 'C', 'D']

Using Spread Operator

The spread operator ... allows you to expand the array elements where zero or more arguments are expected.

To create a new array with additional elements along with the existing elements, use the spread operator to expand the elements of an existing array and pass the additional elements.

You can use the spread operator in two cases:

  1. When you want to create a new array with additional elements instead of pushing the elements into the same array object.
  2. When you want to add multiple elements at both the beginning and the end of the array. This can be done by unpacking the existing array of elements in between the new elements.

Code

The following code demonstrates how to use the spread operator to create a new array of objects with the existing elements and other new elements.

The new elements are added at the beginning and the end of the existing array of elements.

const arr = ['A'];

const arr2 = ['B', ...arr, 'C', 'D'];

console.log(arr2); 

Output

The new elements are added at the beginning and the end of the existing elements.

['B', 'A', 'C', 'D']

Using Array Unshift

The array.unshift() method allows you to push multiple values to the beginning of the array.

You can use this method when you want to add elements at the beginning of the array.

Parameters

It accepts one or more elements as a parameter and pushes them into the beginning array.

Returns

It returns the new length of the array.

Code

The following code demonstrates how to add multiple elements to the beginning of an array in JavaScript.

  • First, an array is created with a single element
  • Then, using the unshift() method, an item is pushed to the beginning of the element. Again, an element is pushed to the beginning by pushing the existing elements to the end.
let arr = ['C'];

arr.unshift('A');

arr.unshift('B');

console.log(arr);

Output

['B', 'A', 'C']

Conclusion

You’ve learned how to push multiple elements to an array in JavaScript.
Additionally, you’ve learned how to add multiple elements to the end of the array, to the beginning of the array and how to add items to an array by replacing the existing items.

You May Also Like

Leave a Comment