Remove Items from Arrays with .shift() & .pop() Methods
Tags: javascript, beginners, tutorial, webdev
Published: 2021-07-26 18:32:20

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:

```js
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.

```js
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:

```js
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:

```js
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:

```js
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:

```js
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.

```js
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.