Stack Data Structure in JavaScript
In this lesson, you'll learn how to create a stack data structure. A stack is a collection of items that obeys the principle of "last in, first out". Like a stack of plates, we can only access the topmost plate at any time. We must remove that plate before we get down to other plates. This is useful for function calls, hence why it's called a "call stack" in JavaScript.
Instructor: [00:00] To create our stack data structure, we're going to use a factory function that returns our stack as a plain JavaScript object. A stack is a collection of items that obeys the principle of last in, first out.
[00:13] When we place a new item onto the stack, we have to remove it first before we get to any other item in the stack that's there before. This data structure is used for handling things like nested function calls in JavaScript. Hence, why it's called a call stack.
[00:26] Our stack will have several methods and properties, push, pop, peek, to look at what's next to be removed, length, and isEmpty. We'll start by creating an array held in closure to store our items.
[00:40] We want to keep our collection in the correct order, so we always want to add and remove items from the same side of the array. We'll use the end of our array to make this happen. Thus, we'll use the array methods that match our stack methods, push and pop, to do this.
[00:54] Using push, we place new items at the end of the array. With pop, we remove the final item from the array. This ensures we maintain order in our stack. Now we'll create our peek method by returning the last item in our array.
[01:09] We can create a length property. In order to do this, we need to use a getter function. If we simply call .length on our stack, we'll get the value every time, because that's the length of the array when this object is created.
[01:24] Using a getter always ensures we get the current array's length. Lastly, we'll add the isEmpty method to quickly tell if our stack has any items left in it.
[01:33] Now that we have a stack, we can try it out. A strange but everyday example of a stack is the act of getting dressed. We have to put clothing on in a particular order. In order to change what we wear, we typically have to remove them in the reverse order.
[01:48] Let's create a lower body stack for the clothing we put on our lower body. We could create another stack for our upper body, but we'll save that for another time.
[01:57] I don't know about you, but the first thing I put on when getting dressed is some underwear, followed by socks. Then I throw on my pants, followed lastly by my shoes.
[02:07] If we take a peek at a lower body stack, we should see that shoes is the first thing we need to remove. Great. Let's say it's time to get ready for bed. I need to pop my shoes off. Let's do that. Now that we've taken our shoes off, if we take a peek at our stack, it should say pants are what comes next. It does. Great.
[02:27] Let's pop those off as well and check the length of our stack. Looks like we have two items left to remove. To keep this PG, I'll save the disrobing for a time when I'm not doing an Egghead lesson. At least we know our stack works the way it should.
@joey, I believe this is so you can call stack.length, not stack.length(). Getters give you property access without calling functions.
By the way, for me in the codesandbox, if I use console.log(lowerBodyStack.length()), without the getter (removing the get from the length) I still get the correct results not zero.
@kyle Why aren't you also using a getter in the isEmpty method? What's the difference?