Start learning free

LESSON 100 OF 348 · ARRAYS I

Array Pop in TypeScript: Removing the Last Item with pop()

Lesson Read the full explanation

Another way to change the data in an array is with the .pop() method.

.pop() removes the last element of an array and also returns the value of that element:

let threeArr = [1, 4, 6];

// Remove last element:
let oneDown = threeArr.pop();

console.log(oneDown); // Output: 6
console.log(threeArr); // Output: [1, 4]

// Remove last element again:
let oneDown = threeArr.pop();

console.log(oneDown); // Output: 4
console.log(threeArr); // Output: [1]

Assignment
Follow the Coding Tutorial and let's play with some arrays.

Hint
Look at the examples above if you get stuck.

STEP 1 OF 2
    Ctrl + Enter to check

    TYPESCRIPT · ARRAYS I

    Array Pop in TypeScript, explained

    What pop does

    The pop method removes the last element of an array and returns it. The array gets one element shorter, and the removed value is handed back to you, so you can store it or ignore it.

    const threeArr: number[] = [1, 4, 6];

const oneDown = threeArr.pop();
console.log(oneDown);  // 6
console.log(threeArr); // [ 1, 4 ]

const twoDown = threeArr.pop();
console.log(twoDown);  // 4
console.log(threeArr); // [ 1 ]

    Each call looks at whatever is last at that moment. The first call removes 6, which leaves 4 at the end, so the second call removes 4. Each result gets its own name here (oneDown, twoDown): declaring the same name twice with let or const in one scope is an error, so use a new name or assign to a variable declared once.

    pop and push

    pop is the opposite of push. Together they make an array behave like a stack: you add at the end with push, and take back the most recently added item with pop. Both change the array in place, and both are cheap, because they only touch the last position.

    const stack: string[] = [];
stack.push("a");
stack.push("b");
console.log(stack.pop()); // b
console.log(stack.pop()); // a
console.log(stack);       // []

    Popping an empty array

    Calling pop on an empty array is not an error. It returns undefined and leaves the array empty:

    const empty: number[] = [];
const value = empty.pop();
console.log(value);  // undefined
console.log(empty);  // []

    This is easy to overlook, because the compiler treats the result of pop on a number[] as a plain number here, even though undefined can come back at run time. The types are erased when the code is compiled, so they won't warn you. When the array might be empty, check arr.length before you pop, or test the returned value against undefined.

    Using the returned value

    The return value is what makes pop more than a delete. You can process each item as you take it off, until the array is empty:

    const tasks: string[] = ["wash", "cook", "eat"];
while (tasks.length > 0) {
    const task = tasks.pop();
    console.log(task);
}
// eat, cook, wash (one per line)
console.log(tasks.length); // 0

    The items come out in reverse order, because the last one in is the first one out. The loop condition checks tasks.length, so pop is never called on an empty array.

    The lesson's exercise

    The starting code has two arrays: fruits with "mango", "kiwi" and "grapefruit", and ages with 14, 32, 50 and 21. The two steps are:

    1. Drop the last fruit. Call fruits.pop(). That leaves ["mango", "kiwi"]. The removed "grapefruit" is returned, but the exercise doesn't need it, so the call stands alone as a statement.
    2. Drop the last two ages. Call ages.pop() twice. The first call removes 21 and the second removes 50, because after the first call 50 is the last element. That leaves [14, 32].
    let fruits: string[] = ["mango", "kiwi", "grapefruit"];
let ages: number[] = [14, 32, 50, 21];

fruits.pop();
ages.pop();
ages.pop();

    Counting the calls is the whole job: one pop removes one element, so removing two ages takes two calls. A single call never removes more than one element.

    Gotchas

    • pop takes no argument. You can't tell it which item to remove. arr.pop(1) still removes only the last element, and the compiler reports the extra argument. To remove from other positions, use splice.
    • It changes the original array. Every variable that refers to the same array sees the shorter array. Copy first with [...arr] if you need the original too.
    • Don't assign the result back to the array. fruits = fruits.pop() would replace the array with a single string. Call fruits.pop() and use fruits as before.
    • Pop returns a value, not a new array. To get the array without its last item without changing it, use arr.slice(0, -1).
    • The first item is a different method. shift removes and returns the first element, but it has to move every remaining element one place to the left, so it does more work than pop.

    Key takeaways

    • arr.pop() removes the last element and returns it.
    • The array shrinks by one and is changed in place.
    • On an empty array it returns undefined and does nothing else.
    • Use one call per element you want to remove.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free