Practical Problem Solving with Algorithms

Check Function: Base Case

Kyle Simpson

Kyle Simpson

You Don't Know JS
Practical Problem Solving with Algorithms

Check out a free preview of the full Practical Problem Solving with Algorithms course

The "Check Function: Base Case" Lesson is part of the full, Practical Problem Solving with Algorithms course featured in this preview video. Here's what you'd learn in this lesson:

Kyle finishes the check function by adding base cases that stop the function from being recursively called. When a base case is reached, the recursive function calls are sequentially returned off the call stack, and the array of symbols is completed. The solution can be found on the option-1 branch.


Transcript from the "Check Function: Base Case" Lesson

>> The last thing that we need to check is whether or not that succeeded. And we said that we return an empty array in the case of failure, a non-empty array in the case of success. So if res.length is greater than 0, Matched successfully. Thumbs up, thumbs down.

How are we following, so far in the logic? Is it making sense? You can give me thumbs sideways. If you're still iffy. I get it. All right. Some of you haven't coded a lot like this before, and that's okay.
>> Someone said I can see where comments help a lot for an algorithmist.

>> Thank you. I'm glad that point is clearly made already. I could not write code without code comments if I was in a language that didn't allow it, I would give up and find a different career. All right. If this was successful then we know that everything to the right of our pivot point, all the rest of the characters, we've got an array of symbols that match those.

And we know we have a symbol for the first one or two characters of what we were passed. So we know we're good. So we finally now can return an array with all of that in it. We return symbol and we return and that...there is saying spread out everything, not rest, res.

Spread out everything in res. Maybe I should have called that rest, I don't know. But this is gonna spread out that array of whatever was returned to us, one element or 20 elements. And then it will append this to the beginning and return that new array. We've got another else condition to consider, which is what if we had just gotten to the end?

Remember I have this if statement here that says, do we have any characters left? What if we don't have any characters left? Well, then we know we're done. So what do we do? We just return an array with only the symbol in it. It's like returning the first part of this answer.

Here we only need to return The only thing that we have to return is the symbol that we know we matched. And if you run through this in your mind, do a couple of mental executions with a couple of those test words. For example, take the test word yucky.

Just think through it in your mind. We're gonna go through a whole bunch of elements until we find one that has a y in it or a yu. I don't even know if there is a yu, but we know there is a y. Okay? So let's assume that there's only a y.

We're gonna find the y element that's gonna be the first time that this if statement passes is when we found the element where the first character of the word yucky matches the periodic table element y. Which I don't even know what that element is like it's on the other screen, I'm not gonna switch over to it.

But whatever that element is, it's the y. Okay? So what's gonna happen here? We're gonna say, do I have any more letters in my word to do? Yes, I still have the u-c-k-y part. I did the y, but I still got the last four. So we're gonna go into that branch and we're gonna say give me the symbols for the u-c-k-y word.

As if somebody had only typed u-c-k-y, right? I know I've got y and I need you to figure out if you can spell the rest of this word with periodic table. We know that eventually through all of that recursion multiple levels deep, in this case four more levels deep, it'll eventually get to a branch where the final y is returned.

Cuz there weren't any more characters, that y will get concatenated one level up in the the call stack with the k and the y. The k in the y will get concatenated with the c and it'll be c-k-y. And then, the c-k-y will get concatenated with the u and it'll be u-c-k-y.

And finally we'll be back to our original invocation of this check function at the bottom of the call stack, where we will get back from res an array that has c-k-y in it and we have the y that we just matched. So we spread out the u-c-k-y sorry and the y that we got, and that's the final return, and that's what comes out to our app.

Good chance that some of you watching this still feel pretty iffy about recursion. Maybe it's the first time anybody's pushed you to really think recursively. Unfortunately, I cannot teach you an algorithms course without forcing you to get more comfortable with recursion. There is just far too many things that we can't do if we can't wrap our brains around it.

And if I showed you the iterative approach to this problem where we had to manage our own stack, I promise you it would be much worse. Managing all of that stack yourself rather than letting the JavaScript engine do it is not something you wanna do. That's not something for the faint of heart.

It can't be done. That should not be your first algorithm that you write. Managing your own call stack. So we wanna take advantage of recursion when we can because it's doing a lot of work for us. Why do the work when somebody else can do the work for us?

I know it's a little smaller to read, it's harder to fit on there, but I just wanna Zoom out so we can approximately see the whole thing on the screen all at once. This is our whole first solution. Now, we've gotta test it here. But if I did things correctly.

Hopefully, we're able to go through the reasoning of it and you have a sense that this is probably correct. But we're about to test it. I'll save that file and we'll refresh here in a moment. Just letting those of you that are still typing catch up. Again, remember, you've got the GitHub repo with these solutions in it so you can always do your DEF checks if you missed an if statement or something, if I move too quick.

Side note here, a little question for you to ponder. We think this is gonna work, but what if we were not allowed to run a test? Did you know that there used to be a day when the process of writing code was not as simple as save and automatic hot load refresh, rerun my test.

People would write programs and spend days waiting for those to get all punched out onto a bunch of punch cards. And then spend another several days waiting for some operator to put them through and then they'd get in the mail the results of it. And imagine if you would wait at all of that time and you got back something and it was like, you miss the semicolon, right?

Or you had an off by one error and you start it over with that whole process. For us, it's real nice. I just type the character, I'm gonna go refresh the page and we'll check if it works. How would you get t o the point where you had a level of confidence over this code that you knew what it was gonna do before you ran the test?

These are rhetorical questions. There's no absolute right answer to this question. But I am taking an opportunity to give myself another little plug, which is that I have another workshop here at Front End Masters called functional JavaScript. Which teaches functional programming principles in JavaScript. And one of the premises of that course is we should be able to get to the point where the code that we write, we have confidence enough over that code that we know what it will do before we run the test suite.

Doesn't mean that we don't test but we don't run the test with our fingers crossed, hoping for a green. We run the test knowing that we're gonna get a green. That's a level of confidence that is difficult to achieve with code. But I'm just providing a little plug that it's worth it.

This code is not that. We would need to do code very differently to get to a level where we were absolutely certain at first glance what this was gonna do. But there is a way to do that. And that's the way of the functional programmer, I guess I'll call it.

All right, so with that little side note aside let's switch back over to our browser here. And we're gonna refresh I didn't get any JavaScript errors there so at least I didn't miss a semicolon somewhere. Let's try it. Our running example was yucky. Let's just see what happens that worked but that doesn't show you anything cuz that was my previous example let's try a different one.

Let's try the word because. Okay, that's good. What about the word unicorns? I love that one. That worked. Here's a really strange word and you're gonna wonder why on earth am I gonna try the word pancreas? Which can be spelled. Here's why I know that the word pancreas can be spelled with the periodic symbol elements.

My daughter who's just about to turn 10, two and a half years ago she was diagnosed with type 1 diabetes which was right in the middle of the worst of the pandemic. And it was pretty rock our world upside down our universe kind of events and we're still digging up from that.

We are tremendously blessed that what we have to be able to provide for her. All the technology and the doctors and all that stuff, but we wanted to come up with a phrase that she could spell out of the periodic table elements that was meaningful to her. And we ended up suggesting and she submitted in her project yucky pancreas.

[LAUGH] So there you go. That's why I know that yucky and pancreas can be spelled. All right, so we have a working solution to our problem, or at least it seems like that we've tested several problems and there we're seeing double and single letter responses coming back. So it seems we're developing a little bit of confidence that it seems like we've arrived at a working solution.

How many of you feel confident that we've arrived at an optimal solution to this problem? Anyone? That's a leading question obviously I wouldn't ask that question if I didn't have a contradictory answer. But I now want us to shift our thinking up another gear from I just got it to work to.

Now, I know why it's doing what it's doing and why there's potential downforce to the way it's working. So I wanna go back to the code now. This by the way is our current state effectively made of typed of comment or variable slightly differently. But this is basically what you see on the option one branch.

So this is our option one solution. We're now gonna talk about redoing this in a different way. And we're gonna talk about it as the option two solution. We'll be working towards option two, which is a more efficient way of doing this. So you wanna start with option one.

And if your code happens to not work cuz you missed any of statement or a variable name, just stash your changes and check out the option one branch. That's our starting point for doing the next set of work.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now