Start learning free

LESSON 407 OF 410 · PROJECTS: OBJECT-ORIENTED

Stack: Build a MyStack Class (JavaScript) in JavaScript

Practice

A stack is a pile where you only touch the top: the last value you put in is the first one you take out (LIFO, last in, first out), like a pile of plates. Build a class MyStack that stores whole numbers in a private array field #data and offers four operations.

The methods:

  • push(value)
  • pop()
  • peek()
  • size()

Rules:

  • push puts the value on top of the stack. It returns nothing.
  • pop removes the top value (the one pushed last) and returns it.
  • peek returns the top value but leaves it on the stack, so the size does not change.
  • size returns how many values are on the stack. A new stack has size 0, and after popping everything the size is 0 again.
  • The stack keeps working after it becomes empty: you can push again.
  • Calling pop or peek on an empty stack is not part of this exercise and the tests never do it. (In JavaScript, pop() on an empty stack returns undefined and peek() would too.)

You start with: The starter already contains the code that uses your stack (below).

let s = new MyStack();
s.push(10);
s.push(20);
s.push(30);
console.log("Top: " + s.peek());
console.log("Size: " + s.size());
console.log("Pop: " + s.pop());
console.log("Size: " + s.size());
console.log("Pop: " + s.pop());
console.log("Pop: " + s.pop());
console.log("Empty size: " + s.size());
s.push(7);
console.log("Top: " + s.peek());
console.log("Size: " + s.size());

Expected output:

Top: 30
Size: 3
Pop: 30
Size: 2
Pop: 20
Pop: 10
Empty size: 0
Top: 7
Size: 1

Reading the output: after pushing 10, 20 and 30 the top is 30 and the size 3. Popping gives 30, leaving size 2. Two more pops give 20 and then 10 (last in, first out), the stack is empty (size 0), and after pushing 7 the top is 7 and the size 1.


The top of the stack is the end of the list: adding and removing at the end is fast, and the last value pushed is always the last element.

Arrays have push and pop(); the last element is this.#data[this.#data.length - 1]. The # prefix makes the field private to the class.

class MyStack {
    #data = [];

    push(value) {
        this.#data.push(value);
    }

    pop() {
        return this.#data.pop();
    }

    peek() {
        return this.#data[this.#data.length - 1];
    }

    size() {
        return this.#data.length;
    }
}

STEP 1 OF 10
    Ctrl + Enter to check

    Stack Impl in JavaScript

    Keep going with JavaScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free