JavaScript Array shift() Method with Example

JavaScript Array.shift() method removes (or delete) the first element from an array and returns the element that it removed.

The shift() method changes the length of an array. It works just like the pop() method, but with one difference:

• The pop() method removes the element from the back of an array, while shift() method removes the element from beginning of the array.

Consider the following example below:

<script>
   let colors = ["Red", "Green", "Blue", "Orange"];
// Removing the first element of the array.
   let firstElement = colors.shift();
   document.write(firstElement, "<br>");
   document.write(colors);
</script>

Output:
       Red
       Green,Blue,Orange

As you can see, that JavaScript interpreter removes an element at the zeroth index and returns the removed element “Red”. Then, it adjusts the indexes of the rest elements according to changes.

That is, the second element becomes the first element, the third element becomes the second element, and so on. Since shift() method modifies the original array, it is a mutator method.

JavaScript Array.shift() Method Syntax

The general syntax to use this method is as follows:

array.shift();

Here, array is the name of an array. The shift() method does not accept any arguments. It returns undefined if the array is empty. i.e. if the length property is 0, the shift() returns undefined as a return value.

Remove first Element from an Array in JavaScript

Let’s create a JavaScript program in which we will remove the first element from an array using Array.shift() method.

Program code 1:

<script>
  let fruits = ["Banana", "Apple", "Orange", "Guava"];
// Removing the first element of the array.
  let firstElement = fruits.shift();
  document.write("Removed element: " +firstElement, "<br>");

  document.write("Modified array: " +fruits, "<br>");
  document.write("Array length: " +fruits.length);
</script>

Output:
      Removed element: Banana
      Modified array: Apple,Orange,Guava
      Array length: 3

In this example, we have created an array named fruits and called the shift() method on the array. The shift() method has deleted the first element of the array fruits and returned the first item, which is string.

We have stored the returned element in the variable firstElement. Then, we have displayed the removed element and array length after removing on the browser.

Remove first Element of Array like Objects

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

<script>
 var numerals = [
       [10, 20, 30],
       [40, 50, 60],
       [70, 80, 90]
 ];
  var removed = numerals.shift();
  document.write("Removed object: " +removed, "<br>");
  document.write("Modified array: " +numerals);
</script>

Output:
      Removed object: 10,20,30
      Modified array: 40,50,60,70,80,90

Use of shift() method in while loop

We often use the shift() method in the condition inside the while loop to empty an array. Every iteration will remove the next element from an array until it is empty. Consider the below example.

Program code 3:

<script>
  const cities = ["Dhanbad", "New York", "Paris", "London" , "Sydney"];
  while( typeof (city = cities.shift()) !== 'undefined' )
  {
    document.write(city, "<br>");
  }
  document.write("Length of array: " +cities.length);
</script>

Output:
      Dhanbad
      New York
      Paris
      London
      Sydney
      Length of array: 0

Browser Support

ECMAScript arrays provide a powerful shift() method that provides a feature to remove the first item from 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 shift() method in JavaScript with many example programs. Hope that you will have understood the basic concept of shift() method and practiced all programs.
Thanks for reading!!!
Next ⇒ JavaScript array unshift() method⇐ Prev Next ⇒