Skip to content

The Stack JavaScript Data Structure

New Course Coming Soon:

Get Really Good at Git

A stack is a data structure that has way more limitations, compared to arrays.

We can add items to a stack only by adding them on top. And we can only remove the item on top of the stack.

Think about it like a pile of books. You can only add books on top, and you can only remove the book on top.

So if you add a bunch of books and then you want to access the first book you added, you first need to remove all the books, until you reach the one you added.

This concept is called First In, Last Out (FILO)

While arrays in JavaScript are built-in, and we don’t need to build them, we must implement stacks.

We’re going to create a data structure that encapsulates our data, making it inaccessible from the outside, and we’ll only allow the push() method to add data to the stack, and the pop() method to remove data from the stack.

We can do this in many different ways. One way is to use classes, and in particular I’m going to use private class fields. Private class fields are not part of the JavaScript standard yet, but they are available in Chrome, Edge, Safari, and Node.js since version 12. Still not available in Firefox, hopefully soon.

Why do I use them? Because they allow us to very easily encapsulate the internal state of the class and protect it from the outside.

class Stack {
  #items = []
  push = (element) => this.#items.push(element)
  pop = () => this.#items.pop()
  isempty = () => this.#items.length === 0
  empty = () => (this.#items.length = 0)
  size = () => this.#items.length

We have 5 public methods: push and pop to add/remove from the stack, isempty to check if the stack is empty, empty to empty the stack, size to get the stack size.

We can now create a stack object from the class, and work with it:

const stack = new Stack()
console.log(stack.size()) //3
console.log(stack.pop()) //[ 3 ]
console.log(stack.size()) //2

Everything would work in the same way with a public property:

class Stack {
  items = []
  push = (element) => this.items.push(element)
  pop = () => this.items.pop()
  isempty = () => this.items.length === 0
  empty = () => (this.items.length = 0)
  size = () => this.items.length

except now we can inspect items from the outside:

const stack = new Stack()
console.log(stack.items) //[ 2 ]

while with private class properties, accessing stack.items would return undefined.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Get my JavaScript Beginner's Handbook
→ Read my JavaScript Tutorials on The Valley of Code
→ Read my TypeScript Tutorial on The Valley of Code

Here is how can I help you: