Loading
Current section: 4. Control Flow 8 exercises
solution

Switch Statements

Transcript

00:00 Alright. Let's get into it. So we're going to start with our description. This is the thing that we're going to, describe the the letter grade. So based on the different, letters that are, that are available, we're going to describe it.

00:13 And like I said, you should be looking for opportunities to get rid of that explicit typing, in my opinion because it just makes your code a little bit nicer. So I do throw in the, explicit types occasionally in here, but look for opportunities that you can get rid of that. In our case with the description, we're not going to assign it to anything, right from the get go. So having an explicit type makes a lot of sense there. Alternatively, you could say, unknown right here because our description is, yeah, unknown grade.

00:46 That would work. And now TypeScript does know that it is a string and will only allow us to assign it to a string. So if I try to say, assign it to some number or something, it's gonna blow up on me. So however you wanna do that, I'm gonna just do it's not assigned. It's gonna be of type string, though.

01:04 And now we get into the switch statement. So the thing that we're going to be evaluating is the grade. If the grade is this, if the grade is that, if the grade is this, if the grade is that, if you're doing something like that, then you can feel free to use if else statements, but you might be better served by a switch statement. So the switch, is going to switch on the grade. And here, we're going to say if, the grade is a so here, we're actually getting a red underline, not comparable to type b.

01:33 Oh, Yeah. That's interesting. That is why we actually need this. I forgot. We do need, this sometimes.

01:41 Let me think if I want to share exactly why at this stage. We're gonna get deeper into types in a future exercise, in a future workshop. So if this bit doesn't totally make sense to you, then just stand by. We'll get to more advanced typings here in a future workshop. But I'll just briefly explain.

02:00 By assigning grade to b, TypeScript knows, hey, this is a const. It could only possibly ever be the value of b. And so here our switch statement is like, hey, why are you switching on whether grade is a? Because it couldn't ever possibly be a unless you were to go and actually change the code. But now we're gonna say, hey, it can't possibly be b.

02:20 There's nothing in your code that changes it to b. So, we want to, compare b, but we also want to have our switch statement do this so we can experiment. And so what, we're doing when we do type string is we're saying, hey, grade can be any string. And TypeScript's like, oh, okay. So it is not necessarily always going to be b.

02:41 You're saying it can be any kind of string. And so what we're doing here is effectively called type widening, and that's what is gonna make what we're trying to do work as we're kind of experimenting with things. Most of the time in a real world program, if you have hard coded values like this, you don't wanna do this and you do wanna just listen to the warnings that you're getting in TypeScript. Oh, it couldn't possibly be a? Well, then why am I doing that?

03:09 Right? But in our case, we're playing around with things. We are going to be changing the value, of the grade and stuff, just through the hard coded value here. And And so we're gonna just widen the type. Say, it's not just the string b, but it's a wider version of that.

03:24 It's a any string possibly. Okay. Great. Thanks for that little detour and, let's continue. We've got our grade.

03:33 If the grade is a, then our description is gonna be excellent, and then we're going to break. What that does, or or, to understand break, you need to understand what happens if we don't have break here. Yeah. We'll go ahead and let that go. So if we don't have break here.

03:49 Actually, you know what? Let's do this. We'll get rid of all of the breaks, and we'll see what happens. Let's console log, and then we'll export. So here we go.

04:02 We've got, that is actually unexpected. What's going on here? Yeah. We got our log grade b. Oh, There we go.

04:12 Yeah. That see, it's confusing. So, our grade is b, and then our description is invalid grade. But that's interesting because here we're saying if the grade is b, the description should be good. What's going on here?

04:28 Well, what happens with the switch statement in particular is, the case basically, is the entry point for where, the the code can start evaluating, with this indentation here. So, right here, or I guess we start right here, we enter into this, case waterfall. I don't know. Nobody calls it a waterfall. I just made that up.

04:51 But, we start into, the case code at case b. And so then it evaluates this. And then from there on, it actually just will cascade down into the next cases automatically. That's the default behavior. So we turn this default behavior off by adding a break to each one of these cases.

05:14 And so now, it's going to say, okay. Well, we get into case b. I'm gonna evaluate this code and then it says break. Oh, okay. Let me break out of this switch statement.

05:24 We'll skip the rest of it. So we'll evaluate this stuff. We'll hit the break and be like, ah, breaks. Let's get out of here, and we continue on with the rest of this code. And so then that gives us a grade of b good.

05:36 So b good. So that is one one aspect of switch statements I wanna do. The other one is some of your AI, assistants may have added curly braces to each one of these things. And this actually comes down to, something called closures, which we or, yeah, this isn't closures actually. This is blocks.

05:59 And that's not really something that we have discussed in, what we've talked about so far. And I don't have an exercise specifically about this. We do talk about closures which is functions and stuff. We'll talk about that later. But these code blocks are useful if you want to have some variables defined inside of this block of code.

06:20 So let's get rid of those. We'll talk briefly what that is all about, and then we can continue with our lives. So, let's say I wanted to say, let's, let's see. My favorite number is 42. And then I wanna say let my favorite number is 42 here as well, and we'll say, excellent.

06:41 My favorite number. We'll put this in a tech template literal. So we're actually using this just to make it more interesting. Good, my favorite number, etcetera. Okay.

06:47 So we're getting red underlines. And the reason that we're getting these red underlines is because we cannot redeclare blocked scope variables. So let and const are both blocked scoped variables. And in fact, so let's switch these to const because we're not reassigning them. We're gonna get the same error.

07:04 So what's going on here is, this would be the same as if we were to move this right up here. That's not gonna work. Right? Because we're re declaring const. We could actually even do the same with let because we can't every time you do a let description or a var description or a const description, That is called a declaration for the variable.

07:28 You cannot do that multiple times. You can only do it once. But if you put them inside of a block, you can. So we could actually put a block right here and a block right here, and now everything is is happy, fine, everything's good because this variable only exists in the context of these curly braces. And so if you want to, have some variables that are scoped down to just a particular case, you can wrap that in curly braces and that's actually a really common thing to do.

07:59 And in fact, I pretty much always have my switch statements use curly braces. All the cases use curly braces to avoid, this exact issue. So I'm gonna do that right now and we're gonna, maybe remind the LLM that, hey, we want to have curly braces around all of our cases because it's just a little bit better hygiene. Okay. Great.

08:22 I think there's one other thing I wanted to mention as I clean this up, and that is, switch statements are, not exactly terse, so at least in how long they get. So let's take a look at a comparison between this and the, the if else version of this. So if I said, if grade, etcetera, etcetera. K? So we've got our grade a, b, c.

08:51 There if we look at this, we're looking at, what is that? 12 lines of code, and then here it's 22 to 47. So it's like quite a bit more code. What what is that? Like, 50% or more 75% more code, at least as far as lines of code is concerned.

09:09 And you've got some repetition with the break and stuff. But the thing that I really like about the switch statement is that I don't have a possibility of making some sort of error like this. Now, TypeScript's gonna help me avoid this type of error. But if you just look at it visually, you might not notice because there's just a lot of noise going on here between each one of these. Or if I were to forget an, an else right here, you might not notice because there's just a lot of code going on here.

09:38 Now luckily for us, we've got some tools like Prettier and TypeScript that can kinda help us with this, and that puts it on a new line. It kinda breaks things up a little bit. But my point is that, this comparison is done automatically for us by the switch statement, and that's kind of that's kinda nice. I kinda like that. So, when I can use a switch statement, I typically will use the switch statement, unless it's really a simple if else, sort of situation.

10:06 Typically, when they're in programming, there's often more than one way to do a thing. I will often do both and then look at them and be like, which one do I hate the least? And choose that one. Alright. There you go.

10:20 That is switch statements. We're, controlling our flow of our program. Hope you enjoyed that one. We'll see you in the next one.