Stacks and Queues in JS with es6 classes and Array

With es6 features, we can use extends keyword to extend an existing class. And when it comes to stack and queues, we don't have specific keywords or data structures for them, so we have to create them ourselves. But if we take a closer look at Array.prototype we could see that methods like pop and push already existing. So for stacks, we could come up with something like below:

class Stack extends Array {
    peek() {
        return this[this.length -1];
    }

    isEmpty() {
        return this.length === 0;
    }
}

So what do we have here with Stack class :

• push ( From Array.prototype )
• pop ( From Array.prototype )
• peek ( we implemented that on Stack )
• isEmpty ( we implemented that on Stack )
• length property which is on Array.prototype

Question !!! let's say Array.prototype.length is ugly, how would you implement a more beautiful size() method on Stack?

size() {
 return this.length;
}

would do the trick. But I think length would be pretty enough. we can use this Stack like this:

const stack = new Stack();
stack.push(1);
stack.push(2);
stack.pop();
stack.isEmpty();

const stack1 = new Stack(1,2,3,4);

Queue

Same way we can write a Queue class like below :

class Queue extends Array {
    enqueue(val) {
        this.push(val);
    }

    dequeue() {
        return this.shift();
    }

    peek() {
        return this[0];
    }

    isEmpty() {
        return this.length === 0;
    }
}

with this we have :

• enqueue
• dequeue
• peek
• isEmpty

methods that we added to Queue class. And we can use Queue like below:

const queue = new Queue();
queue.enqueue(2);
queue.isEmpty();
queue.dequeue();

And if you like to read an alternative implementation for stacks and queues without es6 classes and extending Array class please refer here : https://dev.to/emmawedekind/stacks-vs-queues-in-javascript-4d1o

Please let me know if you think, there's a better alternative for any of above. I am open for suggestions. And if anything is unclear please comment and I will try my best to explain. And thank you very much for reading. Happy Coding !!!

Comments

[Ken Bellows]

Cool idea to use subclasses of native types this way! One comment: for dequeue(), it's probably cleaner and clearer to use this.shift() rather than splicing.

[Dilantha]

Thank you so much @Ken Bellows Added the change. Yes this.shift() is cleaner than splice.

[Nathan Hazout]

Old article I know, but a quick Google search says that shift is actually O(N) at least. Not what you would expect from a Queue...

[Dilantha]

By introducing "shift", the expectation was much cleaner code. But when thinking about splice also, it could be O(n) in a worst-case scenario. Since if you would have to copy all the items to a new array. I think the ideal solution would be to use a linked list rather than an array. What are your thoughts?

[Nathan Hazout]

LinkedList sounds like the most intuitive solution, however I also heard potential issues with pointers all over the place: apparently it could have a high cost in allocations, and cannot be optimized because the memory is spread everywhere.

One potentially good solution I saw was a fixed size array, with 2 pointers in a circle (increase the size of array as needed). However those were general data structure and algorithms, not specific to JavaScript.

I think it's worth pushing your research further to see what's best in javascript for queues with large N.

[Dilantha]

Thank you so much. This is great heads up !!! Sure I will look into what would be the optimized way of handling large N specific to javascript.