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.
Basic Example
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']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.
Table of Contents
Push Multiple Elements To An Array 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.
Use this method when you want to just add elements at the end 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']Push Multiple Elements To An Array 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.
Use this method when you want to replace items in an array by adding new 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 thestart indexisarr.length, and the number of elements to delete is mentioned as0.
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']Push Multiple Elements To An Array 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:
- When you want to create a new array with additional elements instead of pushing the elements into the same array object.
- 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']Push Multiple Elements To An Array Using Array Unshift
The array.unshift() method allows you to push multiple values to the beginning of the array.
Use this method when you want to add elements at the beginning 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']