Clearing the elements of a Stack in Javascript

Consider a simple stack class in JavaScript. We'll implement a clear method to remove all elements from the stack.

Basic Stack Implementation

class Stack {
    constructor(maxSize) {
        // Set default max size if not provided
        if (isNaN(maxSize)) {
            maxSize = 10;
        }
        this.maxSize = maxSize;
        this.container = [];
    }

    // A method to see the contents while we develop this class
    display() {
        console.log(this.container);
    }

    // Checking if the array is empty
    isEmpty() {
        return this.container.length === 0;
    }
    
    // Check if array is full
    isFull() {
        return this.container.length >= this.maxSize;
    }

    push(element) {
        // Check if stack is full
        if (this.isFull()) {
            console.log("Stack Overflow!");
            return;
        }
        this.container.push(element);
    }

    pop() {
        // Check if empty
        if (this.isEmpty()) {
            console.log("Stack Underflow!");
            return;
        }
        return this.container.pop();
    }
    
    peek() {
        if (this.isEmpty()) {
            console.log("Stack Underflow!");
            return;
        }
        return this.container[this.container.length - 1];
    }
}

The isFull function checks if the container length equals or exceeds maxSize. The isEmpty function checks if the container size is 0. The push and pop functions add and remove elements from the stack respectively.

Adding Clear Method

We can clear all stack contents by reassigning the container to an empty array:

// Add this method to the Stack class
clear() {
    this.container = [];
}

Complete Example with Clear Operation

class Stack {
    constructor(maxSize) {
        if (isNaN(maxSize)) {
            maxSize = 10;
        }
        this.maxSize = maxSize;
        this.container = [];
    }

    display() {
        console.log(this.container);
    }

    isEmpty() {
        return this.container.length === 0;
    }
    
    isFull() {
        return this.container.length >= this.maxSize;
    }

    push(element) {
        if (this.isFull()) {
            console.log("Stack Overflow!");
            return;
        }
        this.container.push(element);
    }

    pop() {
        if (this.isEmpty()) {
            console.log("Stack Underflow!");
            return;
        }
        return this.container.pop();
    }

    clear() {
        this.container = [];
    }
}

// Test the clear method
let s = new Stack(2);
s.push(10);
s.push(20);
s.display();
s.clear();
s.display();

[10, 20]
[]

Alternative Clear Methods

You can also clear the stack using these alternative approaches:

// Method 1: Set length to 0
clear() {
    this.container.length = 0;
}

// Method 2: Use splice to remove all elements
clear() {
    this.container.splice(0);
}

// Test all methods work the same way
let stack1 = new Stack();
stack1.push(1);
stack1.push(2);
console.log("Before clear:", stack1.container);
stack1.container.length = 0;
console.log("After clear:", stack1.container);

Before clear: [1, 2]
After clear: []

Conclusion

The clear method efficiently removes all elements from a stack by reassigning the container to an empty array. This operation has O(1) time complexity and immediately makes the stack empty.