There are plenty of methods that allow you to interact with arrays and, consequently, stacks and queues in the JavaScript programming language. Today, we will talk about the method that allows you to remove the element from the array.

The Array.pop() or pop() (both in use), apart from shift() and slice(), is the one that can help you with this. As you might suppose, considering the name, it's used for "popping" an element from the array. It may look evident in some way; however, let's try to define it in a more accurate way and figure out what the trick about .pop is.

Difference from other Array methods

There are four interrelated methods for working with elements in an array: pop(), push(), shift() and unshift(). Together with others, they allow you to manage any array in JavaScript. These methods enable you to add or remove elements in your array.

pop() and push() interact with the last element, while the other two (shift() and unshift()) interact with the first element of an array. push() adds an element into the end of the array, and pop() removes it.

However, before moving further, we should highlight one more thing about the pop() method. It changes the original array. Examples always make everything easier to understand, so let's move on.

How to use

The syntax of the method is quite straightforward:

array.pop()

Let's say we have a simple array with four elements declared with the const keyword. The pop() method applied to the array will remove the last element and mutate the array, reducing its length. Please, pay special attention to how pop() manipulates the original array.

const animals = ['Dog', 'Cat', 'Rabbit', 'Fox'];
// usage of the .pop method will remove the last element
console.log(animals.pop());  
// it removes and returns the 'Fox' as the last element
console.log(); 
// it logs other 3 elements of the "animals" ('Dog', 'Cat', 'Fox')

The element you can remove using the method can be represented by any type of value allowed in an array, for example, a string, a number, a boolean, a variable, etc. The previous example, the pretty simple one, demonstrates the fundamental way to use the method. It gives you the last element of the array and changes the array itself.

Saving the value

There are several more options of using this method. And, yes, it is a widely-used method, and you will face it a massive amount of times in the future, creating your code. Although it is not obvious, it is repetitively used in almost all JS-based programs. So, first of all, you can save the value of the "popped" element, creating a new variable and calling pop().

const animals = ['Dog', 'Cat', 'Rabbit', 'Fox'];
const wildAnimals = animals.pop();
 
// It creates a new variable that stores the last element of the array
 
console.log(animals)           // ['Dog', 'Cat', 'Rabbit']
console.log(wildAnimals)       // Fox

Note: you can remove more than one single object from the same array using the pop() method. It can be called until you have at least one element in your array. Returning to the previous example, if you call pop() one more time, it will remove the 'Rabbit' element as soon as it is the new last element. You can do it even with arrays with one element.

const Capitals = ['Berlin', 'Paris', 'Munich', 'Barcelona'];
console.log(Capitals.pop());
// output Barcelona
console.log(Capitals);
// output ['Berlin', 'Paris', 'Munich']
Capitals.pop;
console.log(Capitals);
// output ['Berlin', 'Paris']

In case you try to return the value from an empty array, it returns undefined. That's the only thing that can go wrong with the pop() method.

let capitals = ['Paris', 'Berlin'];
console.log(capitals); // ['Paris', 'Berlin']
 
console.log(capitals.pop()); //  'Berlin'
console.log(capitals); // ['Paris'];
 
console.log(capitals.pop()); //  Paris
console.log(capitals); // []; the array is empty now
 
console.log(capitals.pop()); //  undefined

Tips for beginners

Although the concepts are plain and mostly demonstrate the method itself, there is more to explore. A bit more abstract, nevertheless, you should keep it in mind for the future.

  • Until you are working with Arrays methods, it is always better to create an array that allows you to impact the last element, not the first. This is a valid argument as soon as pop() and push() are just faster compared to shift() and unshift(). The reason for this is that they don't move any element in the array.

  • In some situations, pop() can be modified by the slice() method allowing you to get a last element from the array.

  • Diving deeper into the JS history, you can see that the pop() method is a feature from the ECMAScript1 (ES1), which basically makes it almost the same old as the JS is. Consequently, it is fully compatible with almost all browsers and certainly with all main browsers.

Conclusion

pop() is one of the methods that can be applied to an array. It has three main characteristics: it removes the last element of the array; it changes the original array; it returns the removed element. You can repeatedly call the pop() method until the array consists of at least one element. Otherwise, it will cause an "undefined" error.