The Stack JavaScript Data Structure

⭐️ 👀 2023 WEB DEVELOPMENT BOOTCAMP starting in days! Join the waiting list to reserve your spot in my 10-weeks cohort course and learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much much more! 👀 ⭐️

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.

One more thing! ⚠️ ✋

At the end of January I will organize the Web Development Bootcamp.

It's a 10-weeks long cohort online course where I will guide you to becoming a Web Developer.

It's not "just a course". It's a big event I organize once a year.

We'll start from zero, learn the fundamentals of Web Development, HTML CSS, JavaScript, Tailwind, Git, using the command line, VS Code, GitHub, Node.js, we'll then learn React, JSX, how to use PostgreSQL, Astro, Next.js, Prisma, deploying on Netlify/DigitalOcean/Fly/Vercel and much more! 

At the end of the first 10 weeks you'll know how to create web sites and web applications and I'll unlock you the 2nd phase of the Bootcamp: you will get access to a large number of projects exclusive to the Bootcamp graduates, so you can follow my instructions to build things like private areas with authentication, clones of popular sites like Twitter YouTube Reddit, create e-commerce sites, and much much more.

Because once you got the fundamentals, you only learn by working on real, exciting projects.

To find out more, visit