JavaScript Array unshift() Method with Example

JavaScript Array unshift() method adds (or insert) one or more elements to the beginning of the array.

This method returns the new length of an array after insertion of elements. It works just like the push() method, but with one difference:

  • The push() method adds the elements at the end of an array, while shift() method adds the elements at the beginning of the calling array.

Consider the following example below:

<script>
  let cities = ["Dhanbad", "New York"];
// Adding two new elements to the beginning of an array.
   cities.unshift("London", "Paris");
   document.write(cities, "<br>");
   document.write(cities.length);
</script>

Output:
      London,Paris,Dhanbad,New York
      4

As you can see, JavaScript maintains the order in which elements are inserted in the array. The rest of elements are re-inserted in the array in the same order with modified index values.

Since shift() method modifies the original array, it is a mutator method.

JavaScript Array unshift() Method Syntax

The general syntax to use this method is as follows:

array.unshift(element1, element2, . . . . , elementN);

Here, array is the name of an array. The element1, element2, . . . ., elementN are the new elements to be added at the beginning of the calling array.

The unshift() method returns the modified length of array after adding of new elements.

Adding Elements in an Array

Let’s create a JavaScript program in which we will add an element at the beginning of an array using unshift() method.

Program code 1:

<script>
   let animals = ["Lion", "Tiger", "Elephant"];
// Adding one new element to the beginning of an array.
   animals.unshift("Bears");
   document.write(animals, "<br>");
   document.write(animals.length);
</script>

Output:
      Bears,Lion,Tiger,Elephant
      4

In this example, we have created an array named animals and called the unshift() method on the array.


The unshift() method has inserted an element at the beginning of the array animals and returned the modified length of the array after insertion of elements.

Then, we have displayed the new array elements and new array length on the browser.

Adding Element in Array like Objects

Let’s create a JavaScript program in which we will create an array-like object containing two elements. Then, we will insert its first element and increments the length parameter.

Program code 2:

<script>
  var numerals = [
       [40, 50, 60],
       [70, 80, 90]
  ];
  var new_length = numerals.unshift(10, 20, 30);
  document.write(numerals, "<br>");
  document.write(new_length);
</script>

Output:
      10,20,30,40,50,60,70,80,90
      5

Browser Support

ECMAScript arrays provide a powerful unshift() method that provides a feature to add one or more items at the beginning of an array. All modern browsers such as Chrome, IE Edge, Opera, Firefox, etc. full support ES1 (JavaScript 1997).

In this tutorial, we have discussed array unshift() method in JavaScript with many example programs. Hope that you will have understood the basic concept of unshift() method and practiced all programs.
Thanks for reading!!!
Next ⇒ JavaScript array splice() method⇐ Prev Next ⇒

Please share your love