Check out a free preview of the full Calculator Project: JavaScript course
The "Handling Back Arrow" Lesson is part of the full, Calculator Project: JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Brian discusses different ways the back arrow functionality can be implemented.
Transcript from the "Handling Back Arrow" Lesson
[00:00:00]
>> Brian Holt: Let's do the back arrow at the end. So let's go ahead and go do the math symbols.
>> Brian Holt: So we could do this in terms of if, else if, else if, else if, right? And that's totally fine if you want to do it that way. I'm going to show you a little bit different way of doing that.
[00:00:21]
If you have like a bunch else ifs all in one thing, you can do something called a switch statement, which are not super common in JavaScript. But it's probably worth knowing for you. So instead of doing this, I'm going to do something called switch. And I'm gonna switch on the value, okay?
[00:00:39]
>> Brian Holt: And then you're just gonna give this a bunch of cases, so you're gonna say, hey, if value is this, do this. If it's this, do this. If it's this, do this. And you're just switching based on what value is. So the first thing I'm gonna put here is case 'C', like that.
[00:00:55]
And then I'm just gonna move what I had in here up into that.
>> Brian Holt: It's gonna look something like that.
>> Brian Holt: So switch and then you have curly braces here, right, that delimit what the switch statement is. And then you're going to give it a bunch of cases.
[00:01:24]
So you're gonna say case, then whatever that case is. So in this case, if value is === C or not value, symbol, rather, if some symbol is === C, then go into this block and do these things. Now a very key thing here is you need line 28 here which is break.
[00:01:44]
Break says, I'm done with my switch statement now. If you don't have the break there it's gonna go into the next block of things. I'll show you a little bit more concretely what that means in a second. But suffice it to say, at the end of every case you need a break.
[00:02:00]
>> Brian Holt: Next one we're gonna do here, is we're gonna do, let's just do addition, okay? So I don't wanna to do all the math thing here. So I'm gonna make another function here called, handleMath. And I'm just gonna pass symbol into that. And then after that, again, I'm going to call break.
[00:02:25]
>> Brian Holt: I haven't written handleMath yet, we're about to write handleMath. So here, if I don't have the break, once this is done, let's just assume that I don't have break here. It's just going to run into the next body there if I don't put break. So that's why it's important to do that.
[00:02:47]
Now that seems inconvenient. You might be thinking why did they design the language that way? One, good question, but two, there actually is a good reason for it. The nice thing about them designing the language this way is I can make a bunch of cases the same thing.
[00:03:01]
So I can say case '-' case ×, right? Case, what was it? ÷, is that what it was? We should look.
>> Speaker 2: Yes.
>> Brian Holt: Cool.
>> Speaker 3: We can use the ampersand in our HTML for everything. We would want to put that in instead of a plus and minus, right?
[00:03:37]
>> Brian Holt: I think so. We should triple check that because in my code, I just have the actual symbols there, so let's figure that out. Yes, good question. But this is nice though, right? We can put all the cases there for all those various different things and it all will be handled here.
[00:03:58]
So let's go and we can delete this now because we rewrote it in a switch statement. So I would say switch statements are not terribly common, but it's worth knowing. In this particular case, it is useful because that symbol can be one of many, right? And so you have many cases that we need to handle.
[00:04:14]
And if we write a bunch of else ifs it just kinda gets verbose, right? This is a little bit more succinct, in my opinion.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops