Shift() vs pop() methods in JavaScript?


To remove an element from an array with JavaScript, use the shift() and pop() functions. However, there is a slight distinction among them. While pop() removes the last element from an array, shift() removes the first element from an array.

When using the shift() method, the value that was deleted is returned after the element at the zeroth position is removed and values at subsequent indexes are shifted downward. The return value is undefined if the length property is 0.

A function that modifies data is shift(). Both the substance and the length of this are altered. Use arr.slice(1) instead if you want the value of this to remain the same but return a new array with the first item deleted.

The generic nature of Array.prototype.shift() allows it to be called or applied to objects that resemble arrays. The behaviour of objects that lack a length property that represents the final consecutive zero-based numerical property may be meaningless.

  • This function returns undefined if the array is empty, but the pop() method turns the deleted elements back into an array. This function's return value is undefined if the array is empty.

  • Both techniques are used to cut the length of the array by 1.

  • The object array's built-in functions are shift() and pop().

  • The initial array will be modified by both techniques.

Syntax

shift()
array.shift()

Return Value

The array's deleted element; if the array is empty, undefined.

Shift() Method

Example 1

In this example let us understand the array shift() method in JavaScript.

<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      function myFunc() {
      
         // Original array
         let tutpoint = ["Tutorialspoint ", "has free Online", "Tutorials", "and Courses"];

         // Check condition in array
         let result = tutpoint.shift();
         document.write(result);
         document.write("<br />");
         document.write(tutpoint);
      }
      myFunc();
   </script>
</body>
</html>

Example 2

The.shift() method also allows us to remove an Array, an Object, or both from the beginning of an existing array. Let's take out the beginning array as an example.

<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let sports = [
         ["Football", " Cycling"],"Wrestling", " Shooting"," Hockey", " Badminton " ];
         let result = sports.shift();
         document.write(result +"<br>"); //output : [ "Football", "Cycling"]
         document.write(sports); //output: ["Wrestling","Shooting","Hockey", "Badminton"]
   </script>
</body>
</html>

pop() Method

The last element in an array is removed by the pop() method, which then returns the removed element. The array's length is altered using this technique. The last element in an array is removed by the pop() method, which then gives the caller the value removed. Undefined is returned if pop() is called on an empty array. Array.prototype. Pop() and shift() both behave similarly, although shift() only affects the first entry of an array.

It is mutating to use the pop() method. Both the content as well as the length of this are altered. If you wish to return a new array with the final entry removed while maintaining the current value of this. Array.prototype.pop() is a method that can be called or applied to objects that resemble arrays; this is done on purpose.

The behaviour of objects without a length property that reflects the final value of a string of continuous, zero-based numerical characteristics may be meaningless.

Syntax

pop()
array.pop()

Return Value

The array element that was removed; if the array is empty, undefined.

Example 3

In this example let us understand how a single item from the end of an existing array is removed using the Array.pop() function.

<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      function myFunc() {
         var langArr = ['JavaScript', 'React JS', 'Angular', 'Tutorialspoint'];

         // You will see the last element will be popping from the array
         document.write(langArr.pop());
      }
      myFunc();
   </script>
</body>
</html>

Example 4

The pop() method works similarly to the shift() method in that it would remove an Array, an Object, or both from the beginning of the existing array. In this example, we'll take an Object out of the array's end.

<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let sports = [ 'Football', ' Cycling',' Wrestling', ' Shooting',['Hockey',' Badminton'] ];
      let result = sports.pop();
      document.write(result +'<br>'); //output: {'H':'Hockey','B':'Badminton'}
      document.write(sports); //output: [ 'Football', 'Cycling','Wrestling', 'Shooting' ]
   </script>
</body>
</body>
</html>

In Brief

The first element of any array can be quickly deleted by using the Array.shift() method. It modifies the length of the starting array and returns the value of the item that was deleted. Any data type array can be used using this technique. It is often used within loops to provide the greatest results. However, you must take precautions when utilising it for huge arrays because it could significantly reduce your program's productivity if you don't understand the concept of method execution.

One of the techniques for using an array is pop(). The last element of the array is removed, the original array is modified, and the removed element is returned. These are its three key qualities. The pop() method can be used several times to populate an array with at least one entry. Otherwise, a "undefined" error will occur.

Updated on: 23-Aug-2022

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements