Remove Items from Arrays with .shift() & .pop() Methods

In this post, we will see "How to Remove Items from an Array".

Before going to the main topic, let's remember what we have known earlier. Arrays are mutable which means, we can add and remove elements and modify the array. The last post of this series was about Adding elements to an Array using Array.unshift() & Array.push() methods.

In this episode, we can look into two methods, Array.shift() & Array.pop(), to know how we can remove/delete elements from the beginning and the end of an existing array respectively.

Both of the methods are nearly functional opposites of the methods .unshift() & .push(). The key difference is neither method takes parameters, and each only allows an array to be modified by a single element at a time. That means, we cannot remove more than one element at a time.

Array.shift() Method

Array.shift() method eliminates a single item from the beginning of an existing array. A simple example of .shift() method is given below:

let fruits = ["Mango", "Orange","Strawberry", "Blueberry"];
let result = fruits.shift();

console.log(result); // output : Mango
console.log(fruits); 

// output: ["Orange","Strawberry", "Blueberry"]

Notice that, the result variable stores the value -- Mango that fruits.shift() method has removed from the beginning of the fruits array. The value of the first index is eliminated.

We can also discard an Array or an Object or both from the starting of the existing array using .shift() method.For example, let's remove an array from the beginning.

let fruits = [
              ["Grapes","Apples"],"Mango", "Orange",
               "Strawberry", "Blueberry"
             ];
let result = fruits.shift();

console.log(result); //output : [ "Grapes", "Apples"]
console.log(fruits); 

//output: ["Mango","Orange","Strawberry", "Blueberry"]

Now, let's move on to the next method Array.pop().

Array.pop() Method

Array.pop() method eliminates a single item from the end of an existing array. A simple example of .shift() method is given below:

let fruits = ["Mango", "Orange","Strawberry", "Blueberry"];
let result = fruits.shift();

console.log(result); // output : Blueberry
console.log(fruits); 

// output: ["Mango","Orange","Strawberry"]

We can see that, the result variable stores the value -- Blueberry that fruits.pop() method has removed from the end of the fruits array. The value of the last index is eliminated.

Similarly, like .shift() method, .pop() method can remove an Array or an Object or both from the starting of the existing array using .pop() method. Here, we will remove an Object from the end of the array:

let fruits = [
              "Mango", "Orange","Strawberry", 
              "Blueberry",{"P":"Peach","L":"Lemon"}
             ];
let result = fruits.pop();

console.log(result); //output: { P: 'Peach', L: 'Lemon' }
console.log(fruits); 

//output: [ 'Mango', 'Orange', 'Strawberry', 'Blueberry' ]

The last index was occupying the Object and after applying the .pop() method to the fruits array, the result variable stored the Object that fruits.pop() method has removed from the end of the array.

We can use both .shift() and .pop() method to remove both values of the first and last indices respectively.
A fine example can be the following one:

let fruits = [[ "Grapes", "Apples"],"Mango",
              "Orange","Strawberry", "Blueberry",
              {"P":"Peach","L":"Lemon"}];

let shifted = fruits.shift() ;
let popped = fruits.pop(); 

console.log( shifted , popped );
// [ 'Grapes', 'Apples' ] { P: 'Peach', L: 'Lemon' }

console.log(fruits); 
// [ 'Mango', 'Orange', 'Strawberry', 'Blueberry' ]

In the above example, the two variables, shifted and popped deleted the values of the first index and last index of the fruits array and the output can be clearly shown in the console.

Since JavaScript Arrays are Objects, elements can be deleted by using the JavaScript operator "delete" also. For example:

let fruits = ["Mango", "Orange","Strawberry"]
delete fruits[1];

console.log(fruits); //[ 'Mango', <1 empty item>, 'Strawberry']

The output changes the second element in fruits to undefined (<1 empty item>). This may leave some undefined holes in the array.

That's why, using .shift() and .pop() is the best practice.

Now, I want to give my readers a problem to solve. Readers can explain their answer in the discussion section.

A function, popShift, is defined.It takes an array prob as an argument and returns a new array. Modify the function, using .shift() & .pop() methods, to remove the first and last elements of the argument array and assign the removed elements to their corresponding variables, so that the returned array contains their values.

function popShift(prob) {
  let shifted; //change code here//
  let popped;  //change code here//
  return [shifted, popped];
}

console.log(popShift(['Problem', 'is', 'not', 'solved']));

The expected output is : [ 'Problem', 'solved' ]

At this point, what if we want to add elements to and remove elements from the middle of an array? That's all we are going to know in the next episode.