Data Structures and Algorithms in JavaScript Implementing a Stack

Transcript from the "Implementing a Stack" Lesson

[00:00:00]
>> Bianca: What I did is I just copied from that slide into my text editor here. And we are going to live code together because suddenly amnesia happening, right? Someone needs to tell me how. How do I fix this? This push function doesn't work. How did you make it work?

[00:00:26]
>> Bianca: Anyone? Did anyone make it work? Yeah, Andy?
>> Andy: For just the push?
>> Bianca: Mm-hm.
>> Andy: So we did this.storage = this.storage.concat. This is right, isn't it? Okay, but if there's no comma.
>> [INAUDIBLE]
>> Andy: For the first argument, we did a three asterisks string. Reason that is our delimiter.

[00:00:51] And then comma, vowel.
>> Bianca: That's awesome. All right. So here we are. Every time that we push, we're going to push triple asterisks. I can never say that word.
>> [LAUGH] [LAUGH]
>> Bianca: And then the value, and so those are the world where our stack is now just a series of words separated by a triple asterisks.

[00:01:20] [LAUGH] Yeah? You're good? Cool. All right, so given that, how do we pop? This is my mischievous look. How can we pop? What's the most easiest way that you can think of?
>> Andy: How we did it, I don't know if it was the easiest.
>> Bianca: [LAUGH] Sure.
>> Andy: So first I did a var return string equals this.storage.slice

[00:02:00]
>> Andy: And then for the argument in there, this.storage.lastIndexOf.
>> Bianca: .last, like this?
>> Andy: lastIndexOf.
>> Bianca: Is that a thing?
>> Andy: Mm-hm.
>> Bianca: Yes. Yes, it is.
>> [LAUGH]
>> Andy: And then for the arguments for that, we give it a triple asterisks.
>> Bianca: Like this? Ooh.
>> Andy: Yep, but then in between the two return parens you have, do a +3 to get, not a comma.

[00:02:35]
>> Bianca: +, I see, cuz you're doing math in there.
>> Andy: Cuz we're taking a slice that start. We want it at [INAUDIBLE].
>> Bianca: So this.storage at lastIndexOf, yeah, +3. Got it. Following loud and clear.
>> Andy: And then, the next line, we set this .storage equal to this.storage.substring.
>> Andy: For the first argument, we gave it 0.

[00:03:03] And the second one, we did this .storage.lastIndexof then our delimiter.
>> Andy: And then, last but not least, we returned the string.
>> Bianca: Cool.
>> Andy: That's a new line.
>> Bianca: Awesome. Cool, so let's do some pseudocode just to walk us through here. So the first thing we're gonna do is we're just gonna slice off the last characters up until the asterisks, right?

[00:03:47] That's essentially what we're doing there. Then, so that's how we're saving the thing that we're gonna return, right? So when we pop, we're gonna remove it, but we also wanna return that value. That's the interface of pop. So the next thing we wanna do is actually, what are we doing here?

[00:04:06] [SOUND] Yeah, and then this is actually slicing off, so this is actually updating the new stack without the last item, yeah?
>> Andy: On line 10, is that actually finding the index of the last item before it's actually slicing it?
>> Bianca: So the order of operation is whatever is happening inside of this parenthesis, is gonna happen first.

[00:04:35] Yup.
>> Andy: Yup.
>> Bianca: So then we return the last item.
>> Andy: Substring.
>> Speaker 3: I'm realizing as I watch you do it, it might have been better to do storage.lastIndex, like a storage, storage.lastIndexof as a variable in the beginning since we are calling it twice, and I could just use the variable.

[00:04:57]
>> Bianca: Yeah, yeah. So some optimizations, maybe is just saving that as a variable so that we can refer to it later. Also we could name it something that might be more meaningful to us, so that when someone comes after us, they'll be like, what does this sort, that lastIndexof, it could be last eliminator, whatever you wanna call it.

[00:05:17] Cool, all right. So what do we think? How was this process for you? Even if you didn't finish, what was that like?
>> Bianca: That was good?
>> [INAUDIBLE]
>> Andy: Yeah, it's cool.
>> Bianca: Yeah? What did you find challenging about it? As I heard, like this is mean-
>> [LAUGH] [LAUGH]

[00:05:41]
>> Bianca: From some people. It's challenging.
>> Andy: I don't usually work with JavaScript. So I knew what I wanted to do, but not exactly how to do it.
>> Bianca: Yeah.
>> Andy: So that was a challenge.
>> Bianca: Yeah, yeah, totally. Cool. What else?
>> Speaker 4: Used to using built-in functions, and just having them work.

[00:06:03] And so to actually design the structure of making design decisions. Which you usually have to do.
>> Bianca: Yeah, yeah, yeah, so actually implementing underneath of how this is working. This is what this class is gonna be. You're gonna be like, that's kind of a thing I've seen before, except it came for free out of the box, and I took it for granted.

[00:06:24] And now, no, now suddenly I have to write it. And it's just like this. It's all a process, and it's your approach, right? And this is just forever a taste of what this is gonna be like. We're gonna be throwing something a little bit abstract, and we need to implement it.

[00:06:44] And we get to design it, right? And then later we'll talk about how to optimize and all that. But this is just a first step in designing our own data structure, right? Just like we said, we could have used an array, absolutely. But a lot of these things don't come for free, right?

[00:07:02] We don't have trees, for example, graphs/trees/linked lists, anything like that. We don't get that for free. We have to implement them. And so, here we are doing that. So if you didn't get a chance to finish this, I recommend, over the lunch, take a stab at finishing this up, yeah?

[00:07:20] Without looking at the answers. Great.