How to add new array elements at the beginning of an array in JavaScript?

Front End Technology Javascript Web Development

We will learn how to add new array elements at the beginning of an array in JavaScript. To achieve this in JavaScript we have multiple ways, a few of them are following.

Using the Array unshift() Method
Using the Array splice() Method
Using ES6 Spread Operator

Using the Array unshift() Method

The array unshift() method in JavaScript is used to add new elements at the start of the array. This method changes the original array by overwriting the elements inside it.

Syntax

arr.unshift(element1, element2, . . . . . . , elementN)

Parameter

element1, element2, …, elementN − The elements to be inserted. If you have multiple elements, enter them as comma-separated parameters.
arr − It is the original array to which we add new element/s.

Returns − It returns the length of the updated array.

Example

In this example, we are adding 0 at the start of the array using the Array unshift()method.


<html>
<body>
   <h2>Adding new array elements at the beginning of an array.</h2>
   <p><b>Array:</b> <span id="oldArray"> </span> </p>
   <p><b>Updated Array: </b> <span id="updatedArray"></span></p>
   <button id="btn" >Click to Add</button>
</body>
<script>
   // Get the button element
   let btn = document.getElementById("btn")
   
   // Get the element where old array situated
   let oldArray = document.getElementById("oldArray")
   
   // Get the element where a new array will be assigned
   let updatedArray = document.getElementById("updatedArray")
   
   // The old array
   let array = [1, 2, 3, 4, 5]
   
   // Show the old array
   oldArray.innerText = array;
   btn.onclick = () => {
      
      // Insert 0 at the starting of the array
      array.unshift(0)
      updatedArray.innerText = array
   }
</script>
</html>

Using the Array splice() Method

The array splice() method in JavaScript is used to add or remove elements from the array. This method changes the original array by overwriting the elements inside it.

Syntax

Following is the syntax for Array splice() method −

arr.splice(index, howmany, element1, element2, . . . . . elementN)

Here arr is the original array to which the elements will be added.

Parameter

index − This is a required parameter that specifies at which index you want to add or remove the element(s).
howmany − This is an optional parameter that specifies the number of items to be removed.
Element1, element2, . . . . . . elementN − Elements(s) to be added.

It returns the complete updated array.

Approach

To add an element at the starting of the element we pass the first parameter 0 because we are adding an element at the 0^th index and the second parameter also 0 because we are not removing any element from the array. The third parameter will be the element to be added to the array.

Example

In this example, we are adding “22” at the starting of the array using the Array.splice method.


<html>
<body>
   <h2>Adding new array elements at the beginning of an array.</h2>
   <p><b>Array:</b> <span id="oldArray"> </span> </p>
   <p><b>Updated Array: </b> <span id="updatedArray"></span></p>
   <button id="btn" >Click to Add</button>
</body>
<script>
   // Get the button element
   let btn = document.getElementById("btn")
   
   // Get the element where old array situated
   let oldArray = document.getElementById("oldArray")
   
   // Get the element where new array will be assigned
   let updatedArray = document.getElementById("updatedArray")
   
   // The old array
   let array = [1, 2, 3, 4, 5]
   
   // Show the old array
   oldArray.innerText = array;
   btn.onclick = () => {
      
      // Insert 22 at the starting of the array
      array.splice(0, 0, 22)
      updatedArray.innerText = array
   }
</script>
</html>

Using the ES6 Spread Operator

In this method we will create a new array and assign its first element as the element we want to add and the second element will be all the elements of the old array which we will access using the spread operator.

Example

In this example, we are adding “22” at the starting of the array using the ES6 spread operator.


<html>
<body>
   <h2> Adding new array elements at the beginning of an array. </h2>
   <p> <b>Array:</b> <span id="oldArray"> </span> </p>
   <p> <b>Updated Array: </b> <span id="updatedArray"> </span> </p>
   <button id="btn" >Click to Add</button>
</body>
<script>
   // Get the button element
   let btn = document.getElementById("btn")
   // Get the element where old array situated
   let oldArray = document.getElementById("oldArray")
   
   // Get the element where new array will be assigned
   let updatedArray = document.getElementById("updatedArray")
   
   // The old array
   let array = [1, 2, 3, 4, 5]
   
   // Show the old array
   oldArray.innerText = array;
   btn.onclick = () => {
      
      // Create a new Array
      let newArr = [22, ...array]
      updatedArray.innerText = newArr
   }
</script>
</html>