Javascript · Arrays (Basics)
Removing Elements (pop, shift)
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Removing the Last: pop
`pop()` does the opposite of `push()`: it removes the last element. And it gives it back to you, so you can use it:
const bag = ["Potion", "Map", "Elixir"];
let used = bag.pop();
console.log("You used: " + used);
console.log(bag);
The array now has 2 elements, and `used` holds the one that was removed. No argument needed: `pop` always takes the last one.
Exercise 2 — Removing the First: shift
`shift()` removes the first element and shifts all the others one position to the left. Like `pop`, it returns the removed element:
const line = ["Sam", "Lea", "Noa"];
let next = line.shift();
console.log("Now serving: " + next);
console.log(line);
console.log(line[0]);
Sam is served, Lea is now at index 0. This is exactly how a queue works: first in, first out.
Exercise 3 — Quiz: After pop
What does this code print?
const team = ["Aquachu", "Pyrochu", "Florachu"];
team.pop();
console.log(team.length);
Options
• ```2```
• ```3```
• ```1```
• ```"Florachu"```
Hint : The question is about the size of the array, not about what was removed.
Exercise 4 — Use and Serve
Remove the last item of the bag and the first trainer of the line, storing each removed value.
const bag = ["Potion", "Map", "Elixir"];
const line = ["Sam", "Lea", "Noa"];
let item = bag.____();
let trainer = line.____();
console.log(item + " / " + trainer);
Options: pop shift push unshift remove
Hint : One method per end of the array, and both give the removed element back.
Exercise 5 — Popping an Empty Array
What if there's nothing left to remove? No error: `pop` and `shift` simply return `undefined` and the array stays empty.
const bag = ["Potion"];
console.log(bag.pop());
console.log(bag.pop());
console.log(bag.length);
So before using a removed value, it's a good habit to check `length` first, or to test the result against `undefined`:
const bag = [];
let item = bag.pop();
if (item === undefined) {
console.log("The bag is empty!");
} else {
console.log("You used: " + item);
}
Exercise 6 — Quiz: Nothing Left
What does this code print?
const moves = [];
console.log(moves.shift());
Options
• ```undefined```
• An error
• ```null```
• ```0```
Hint : Removing from an empty array is allowed. What does "nothing" look like in JavaScript?
Exercise 7 — Emptying an Array with a Loop
Combine `length` and a `while` loop to process elements one by one until nothing is left. Here every trainer in line gets served:
const line = ["Sam", "Lea", "Noa"];
while (line.length > 0) {
let trainer = line.shift();
console.log("Serving " + trainer + "...");
}
console.log("Everyone has been served!");
Each `shift` makes the array shorter, so the loop ends by itself. With `pop` instead, the elements would come out in reverse order: last in, first out, like a stack of plates.
Exercise 8 — Drink Them All
Use all the potions in the bag, starting with the last one, until the bag is empty.
const bag = ["Potion", "Super Potion", "Elixir"];
while (bag.length ____ 0) {
let potion = bag.____();
console.log("Drinking " + potion);
}
Options: > < pop push ===
Hint : The loop must keep going as long as something remains, and each turn must take from the correct end.
Exercise 9 — pop vs shift
Match each element with its effect.
Items to match
• pop()
• shift()
• The value returned by `pop()` and `shift()`
• [].pop()
Definitions
• Removes the last element
• Removes the first element
• The removed element
• undefined
Exercise 10 — Battle Preparation
Before the battle:
1. Use the last two items of `bag`, printing `"Used: X"` for each one
2. The first trainer in `line` gets called: remove them and print `"Called: X"`
3. Print `"Items left: N"` and `"Next in line: Y"`
Starter code
const bag = ["Berry", "Potion", "Super Potion", "Elixir"];
const line = ["Sam", "Lea", "Noa"];
// Write your code here