JavaScript Data Structure Pt 2: Stack
Tags: tutorial, javascript, programming, beginners
Published: 2023-02-12 20:44:28

## What is a Stack?

The **Stack Data Structure** is a way that allows us to store a collection of `data` in a **Last In First Out** fashion. This means the last `element` added to the stack, is the first one to be removed. 

**Basic example**

![Stack Data Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/basiy4mehke63nal9zbv.jpg)

**In Code**

We will use an `Array` to create our **stack**

```jsx
let stack = []
```

We can use the following built-in `methods` to create a **Stack** using `push()` and `pop()`

```jsx
stack.push() // add an element to the end of the Stack

stack.pop() // remove the last element of the Stack
```

**basic syntax**

```jsx
let stack = [1,4,2,6,8]

stack.push(5)

console.log(stack) // output [1,4,2,6,8,5]

stack.pop()

console.log(stack) // output [1,4,2,6,8]
```

### Following up from Array

This is the following up article after **Arrays Data Structure**. We are building on our previous knowledge to help leverage our previous demonstrations. The more practice, the more we can get comfortable with these structures. 

_____

## Using arrays to implement a Stack

We will create a **Stack class** to allow us to make our **data structure** anywhere by using our `stack class`. We will have two main `methods` from the `pop` and `push` , then we will implement a few of our own like `peek` , `isEmpty`, `size` , and `clear` . 

**Stack Class**

```jsx
class Stack { } 
```

Anytime we want to use our **Stack Data Structure** we want to initiate an empty `Array`

```jsx
class Stack {
	constructor() { 
		this.items = [];
  }
}

let stack = new Stack();

console.log(stack.items) // output [ ] <--- empty Array
```

---

**Adding** **pop** & **push** 

`pop()` removes the top `element` of the **stack**

```jsx
pop() { 
  return this.items.pop()
}
```

`push()` adds an `element` to the top of the **stack**

```jsx
push(element) {
	this.items.push(element);
}
```

**Stack Class**

```jsx
class Stack {
  constructor() {
		this.items = []
  }

	pop() {
		return this.items.pop();
	}

	push(element) {
		return this.items.push(element);
	}

}
```
_____ 

### Checking our top element

We want to be able to check the top `element` of our **stack.** We can do so by retrieving the **last** item of our `Array` . 

```jsx
peek() { 
	return this.items[this.items.length - 1];
}
```

**Stack Class**

```jsx
class Stack {
  constructor() {
		this.items = []
  }

	pop() {
		return this.items.pop();
	}

	push(element) {
		return this.items.push(element);
	}
	
	peek() { 
		return this.items[this.items.length - 1];
	}
}
```

_____

### Checking if Stack is empty

We need to be able to check if our **stack** is either **empty** or **not**. 

```jsx
isEmpty() { 
	return this.items.length === 0; // this will return true or false 
}
```

**Stack Class**

```jsx
class Stack {
  constructor() {
		this.items = []
  }

	pop() {
		return this.items.pop();
	}

	push(element) {
		return this.items.push(element);
	}
	
	peek() { 
		return this.items[this.items.length - 1];
	}

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

### Checking Stack Size

We need to be able to see the amount of `elements` our **stack** is storing. We can do so by returning the `length` of our **stack**

```jsx
size() {
	return this.items.length;
}
```

**Stack Class**

```jsx
class Stack {
  constructor() {
		this.items = []
  }

	pop() {
		return this.items.pop();
	}

	push(element) {
		return this.items.push(element);
	}
	
	peek() { 
		return this.items[this.items.length - 1];
	}

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

	size() {
		return this.items.length;
	}
}
```

_____

## Clearing up Stack

We need to be able to clear up our **stack.** Removing `elements` from the **stack** one by one can be time-consuming, which is why it’s easier to clear our stack**.** 

```jsx
clear() {
	return this.items = [];
}
```

**Stack Class**

```jsx
class Stack {
  constructor() {
		this.items = []
  }

	pop() {
		return this.items.pop();
	}

	push(element) {
		return this.items.push(element);
	}
	
	peek() { 
		return this.items[this.items.length - 1];
	}

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

	size() {
		return this.items.length;
	}

	clear(){ 
		return this.items = [];
	}
}
```

_____

## Using our Stack Data Structure

With our `Stack` class, we can now create **stacks** anywhere. 

```jsx
var stack = new Stack();

stack.push(2)
stack.push(3)
stack.push(7)

console.log(stack.items) // [2,3,7]

stack.pop()

console.log(stack.items) // [2,3]
```

When working with the Stack Data Structure, it can be handy when retrieving the most recently added element. This article aims to help us understand how the Stack Data Structure works behind the hood. We do not need to reinvent the wheel regarding these Data Structures, but it is handy in rare cases. We can always use the built-in methods to create a stack.

_____

### Conclusion <a name="conclusion" />

By the end of this article, I hope you can see the power `Stack` **data structures** have when it comes to data collection. This is one of many key concepts in the JavaScript programming language. If you manage to stick around this far I appreciate your time and eagerness in learning with me! 


<aside>
💡 If we want to learn more about the other `methods`, check out the [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

</aside>