Hey, Fuelers!

At some point, you're going to want to remove the last element from arrays. That's where the .pop() the method comes in handy .pop() removes the last element from an array and returns it.

In this quick guide, we'll go over how .pop() works with some simple examples.

Let's Dive In!

What Is .Pop() in javascript?

The .pop() is a javascript array method that removes the last item of an array and returns it.

For example:

let fruits = ["Apple", "Banana", "Orange"];

let last = fruits.pop();

// last = "Orange"

// fruits is now ["Apple", "Banana"]

As you can see, .pop() removed "Orange" from the fruits array and returned it, storing it in the last variable.

This is useful when you want to remove an item from the end of an array and use it for something else. Maybe you have an array of users and want to get the last user in the array to award them a prize!

Real World Example

A real-world example would be a to-do list app. You could have an array of to-do items, and when a user completes one, call .pop() to remove it from the list.

let todos = ["Walk the dog", "Do laundry", "Make dinner"];

todos.pop();

// todos are now ["Walk the dog", "Do laundry"]

.pop() modifies the original array, so make sure you don't need that last item anymore before calling .pop(), because there's no way to get it back!

Assigning the Popped Value

So you’ve used .pop() to remove an item from your array. But what after the item is popped off?

When you call .pop(), the method actually returns the value of the item it removes.

For example, say you have an array of strings:

let fruits = ['Apple', 'Banana', 'Orange']

If you call .pop() on this array, it will remove the last item, 'Orange', and return that string:

let lastFruit = fruits.pop()

// lastFruit = 'Orange'

// fruits = ['Apple', 'Banana']

Now the string 'Orange' is stored in the lastFruit variable, and you can use it elsewhere in your code.

This is useful when you want to remove an item from an array but still use its value for something.

What Happens if You Pop From an Empty Array?

When you pop from an empty Array, rather than throwing an error, .pop() will simply return undefined.

For example:

let fruits = [];

let fruit = fruits.pop();

console.log(fruit); // undefined

Since there are no elements in the fruits array, .pop() has nothing to remove. So it returns undefined.

This is actually useful behavior. It means you can safely call .pop() on an array without first checking if it's empty. If it is empty, you'll simply get undefined back, and your code can handle that gracefully.

So in summary, calling .pop() on an empty array:

• Will not throw an error
• Will return undefined
• Allows you to safely "try to pop" without checking the array length first

.Pop() vs .Shift(): What's the Difference?

You know about .pop(), .shift() is similar to it`. Both methods remove the first element from an array, but there’s an important distinction.

.Pop() removes the last element from an array. It "pops" it off the end.

let fruits = ["Apple", "Banana", "Orange"];

fruits.pop();

// fruits is now ["Apple", "Banana"]

.Shift(), on the other hand, removes the first element from an array. It "shifts" all the other elements to a lower index.

let fruits = ["Apple", "Banana", "Orange"];

fruits.shift();

// fruits is now ["Banana", "Orange"]

So to summarize:

.Pop()

• Removes the last element
• Changes array length
• Faster than .shift()

.Shift()

• Removes the first element
• Shifts all elements
• Slower than .pop() due to shifting elements

A good way to remember the difference is:

• .Pop() - Removes from the back (like a stack)
• .Shift()- Removes from the front (like a queue)

pop() vs. .splice(): Comparing Efficiency and Functionality

The .pop() method removes the last element from an array and returns it. This is useful when you want to shorten an array by one element.

Let's say you have an array of fruits like this:

let fruits = ["Apple", "Orange", "Banana"];

To remove the last element, Banana, you can use .pop():

let banana = fruits.pop();

console.log(fruits); // ["Apple", "Orange"]

console.log(banana); // Banana

.pop() will return the removed element, which we stored in the banana variable.

Compare this to .splice(), which can remove elements from anywhere in the array. Using .splice() to remove the last element would look like this:

let banana = fruits.splice(2, 1);

This does the same thing, removing 1 element starting at index 2.

So which should you use?

Generally, .pop() is more efficient since it doesn’t have to shift any elements around in the array. .splice() has to rearrange the array after removing an element from the middle.

However, .splice() is more flexible since you can remove elements from anywhere.

So, use .pop() when simply removing the last element, and .splice() when you need more complex removals.

To summarize:

• Use .pop() to simply remove the last element of an array.
• It is efficient since it does not have to shift other elements.
• Use .splice() when you need to remove elements from anywhere in the array.
• .splice() has to shift other elements so is less efficient for removing just the last element.

Conclusion

So there you have it, a quick intro to the .pop() method in JavaScript. In our next blog, we will learn about .shit() JavaScript which removes the first item of an array. Happy coding!

Must Read:

1. IIFE - Deep Dive
2. Absolute Value in JS
3. Reverse a String in JS