FAQ: Arrays - The .pop() Method

mtf
Is .pop() operater only use to remove one value from the end?

Can we remove more values using .pop() operator?

Array.pop() is a method (not an operator) that can only remove one element at a time from the right side of the array.

a = [1, 2, 3, 4, 5, 6, 7, 8, 9]
b = a.pop()
console.log(a)    //  [1, 2, 3, 4, 5, 6, 7, 8]
console.log(b)    //  9

We can remove more values using the Array.splice() method but there is no value returned since the method is in-place.

2 Likes

Thanks mtf your teaching is so understandable.

2 Likes

The problem with this exercise is that it does not explicitly specify that chores.pop(); deletes the item, while const removed = chores.pop(); stores it. I had the same problem and I had to experiment for some time with the code to figure it out.

2 Likes

just a little notice, the link for the MDN array documentation is broken, it can’t be “clicked”. you can copy the url and paste it in a new window tho.

for this lesson: https://www.codecademy.com/courses/introduction-to-javascript/lessons/arrays/exercises/pop

P.S. The link in the project: “Secret Message” at the end of the array module is broken in the same way.

Does pop() needs parameters

In JavaScript, no parameters are expected by the .pop() method. The method is the exact opposite of the .push() method. The last thing pushed will be the first thing popped.

1 Like
  • In the example above, calling .pop() on the newItemTracker array removed item 2 from the end.

well, they didn’t call .pop( on the array, I almost got lost it trying to follow the example to the T.

const newItemTracker = ['item 0', 'item 1', 'item 2'];
 
const removed = newItemTracker.pop();

newItemTracker is most certainly an array, and pop is most certainly called on the array

@mtf Really its an advanced one to share this here man…
Try to understand why you do this in dedicated copy , not original array itself … If you donot understand, its okay … Don’t stress more on it as if now guys…

// PRINGTING WITHOUT ALTERING ORIGNINAL ARRAY

a = "abcd".split("")
console.log(a) //=> [ 'a', 'b', 'c', 'd' ]

log = x => {
    console.log(x) //=> just prints the value
}

a.forEach(log) //=> a|b|c|d 
console.log(a) //=> [ 'a', 'b', 'c', 'd' ]


// PRINGTING WITH ALTERING ORIGNINAL ARRAY

// example 1

a = "abcd".split("")
console.log(a) //=> [ 'a', 'b', 'c', 'd' ]

log = () => {
  console.log(a.shift())  // remove first element
}

console.log(a.slice()) //=> [ 'a', 'b', 'c', 'd' ]
console.log(a)  //=> [ 'a', 'b', 'c', 'd' ]

//We do updation of original array, length varies dynamically here
//so it will go upto half or half+1  length only
a.forEach(log) //=> a | b
console.log(a) //=> ['c','d']

a.slice().forEach(log) //=> c | d
console.log(a) //=> [ ]


// example 2

a = "abcdefg".split("")
console.log(a) //=> [ 'a', 'b', 'c', 'd', 'e', 'f','g' ]

log = () => {
  console.log(a.pop()) // remove last element
}

a.forEach(log) //=> g | f | e | d
console.log(a) //=> [ 'a', 'b', 'c' ]
a.forEach(log) //=> c | b
console.log(a) //=> ['a']

a.slice().forEach(log) //=> a
console.log(a) //=> [ ]

// PRINGTING WITHOUT ALTERING ORIGNINAL ARRAY a = "abcd".split("") console.log(a) //=> [ 'a', 'b', 'c', 'd' ] log = x => { console.log(x) } a.forEach(log) //=> a|b|c|d console.log(a) //=> [ 'a', 'b', 'c', 'd' ] // PRINGTING WITH ALTERING ORIGNINAL ARRAY // example 1 a = "abcd".split("") console.log(a) //=> [ 'a', 'b', 'c', 'd' ] log = () => { console.log(a.shift()) // remove first element } console.log(a.slice()) //=> [ 'a', 'b', 'c', 'd' ] console.log(a) //=> [ 'a', 'b', 'c', 'd' ] //We do updation of original array, length varies dynamically here //so it will go upto half or half+1 length only a.forEach(log) //=> a | b console.log(a) //=> ['c','d'] a.slice().forEach(log) //=> c | d console.log(a) //=> [ ] // example 2 a = "abcdefg".split("") console.log(a) //=> [ 'a', 'b', 'c', 'd', 'e', 'f','g' ] log = () => { console.log(a.pop()) // remove last element } a.forEach(log) //=> g | f | e | d console.log(a) //=> [ 'a', 'b', 'c' ] a.forEach(log) //=> c | b console.log(a) //=> ['a'] a.slice().forEach(log) //=> a console.log(a) //=> [ ]

It’s just a simplified approach to creating an array from a string with less typing.

I agree with this reply and the lack of logic. The instructions say one thing and make us do code that has no bearing on the lesson. Maybe it’s trying to kill multiple birds with the one stone (poor birds) for making the course more concise and smaller but as beginners to this, we’d prefer to see it as clearly and simply as possible and then have other more ‘colourful’ concepts introduced later. I can totally see the logic of pop as its entirely normal to remove items from an array but for a method that’s supposed to ‘remove’ something, the result is that it’s NOT removed but just got saved somewhere else. Weird logic from the course creator. Maybe this is a very common use case (no idea, not enough experience to say) and it was necessary to show the primary use cases but it certainly needs better explanation.

As we see in the example, the element is indeed removed from the array. It is not just evaporated into the ether, though, but optionally assigned to a variable for further use. There is nothing ‘weird’ going on here. It is all very practical.

Maybe weird is the wrong word. I suppose my problem is with the objective of the lesson, to explain ‘pop()’. For example I’m still trying to understand the use cases for pop - for sure there are many but as a beginner to this I’m trying to understand why I’d want to knock one single element of the end of a list either just once or very regularly. So trying to understand pop at it’s simplest is a mini struggle for me, then to introduce pop removals being captured by another variable is like 2 levels higher than where I am. Maybe I’m just a touch slow.

Let’s say we have a card game with two players such as gin rummy. There are six collections involved.

  • the 52 card deck
  • hand one
  • hand two
  • outlay one
  • outlay two
  • discard pile

When we have shuffled the deck, we deal out the two initial hands.

hand1.push(deck.pop())
hand2.push(deck.pop())

That would be in a loop until seven cards are dealt to each hand. The cards have been removed from the deck so they cannot be drawn again.

Hallo
Can I remove more than one item at a time using .pop() ?
Can I make it remove 3 items in one sentence instead of writing fx. abc.pop() three times in a row?

no, then you would need to switch to something like splice method

It may not look elegant, but if one wants to rid themselves of the last three elements, then three pops is just as good a solution as any other, and exactly to the point. I’d bet it’s even faster than splicing. Moreover, those popped values can still play a dynamic role.

I added some code to explore a difference I saw in an earlier exercise. My question is why does the list get printed first as a list with each element on their own line then I print the list again and it doesn’t put each element on its own line. See screenshot…

this very likely has to do with the UI of codecademy, how the list are displayed.