Check out a free preview of the full Calculator Project: JavaScript course
The "Handling Math" 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 codes the first part of the functionality that handles mathematical symbols on the calculator.
Transcript from the "Handling Math" Lesson
[00:00:00]
>> Brian Holt: So down here, we'll just write function handleMath. And that's gonna take some sort of symbol.
>> Brian Holt: This is gonna be exactly what you'd expect. I have it here in terms of if and else if, but you could totally do this again in terms of cases. I'm just gonna say if,
[00:00:21]
>> Brian Holt: Let's do this, handleMath.
>> Brian Holt: So if the buffer === 0, so if I hit plus and,
>> Brian Holt: The buffer is 0, that doesn't make any sense, right? So here we're just gonna do nothing, and return.
>> Brian Holt: So if the buffer is just === 0 here, then you're just not gonna do anything.
[00:00:59]
And this return just means don't execute the rest of the function, just get out of there.
>> Brian Holt: If it's not equal to 0, then we have other things to do. So at this point, we wanna turn our buffer into a number, right? Because we're actually gonna be doing mathematical operations with it.
[00:01:16]
So the first thing I'm gonna do here is I'm just going to say const intBuffer = parseInt(buffer). And now, this is gonna be a number.
>> Brian Holt: I'll show you another little hack to do that. So parseInt takes in a string and gives you back the number representation of that string, right?
[00:01:45]
If you wanna do it the shorthand way, you can also just do plus, like that. This will do exactly the same thing.
>> Brian Holt: Just kind of a shorthand. I'm gonna leave it as parseInt, cuz that way, it's a little bit more explicit. People know, this person's turning a string into a number, because that's exactly what that function does.
[00:02:07]
But you may see someone just put the plus sign there.
>> Brian Holt: Okay, if runningTotal === 0,
>> Brian Holt: Then what? So if I click 25 +, what should be my running total at that point?
>> Speaker 2: Question, why don't we have to say else if there? Is that because we returned or because-
[00:02:37]
>> Brian Holt: Yep.
>> Speaker 2: Okay.
>> Brian Holt: So we don't have to do else if here. You could, but you don't have to. When you do return here, it just short circuits the entire function and just returns and gets out of there. So the rest of the function won't be invoked.
[00:02:53]
Often if you have these conditions, where this function should only be conditionally run, this is how you do it, right? Right at the top, you're saying, if this, then return, otherwise, just continue executing the rest of the function.
>> Brian Holt: Notice that we're not returning anything, right? You could say return 0 or something like that.
[00:03:11]
But that's not ultimately what we're trying to do here. We're just trying to get the function to end.
>> Brian Holt: Okay, so going back to what we're talking about. If runningTotal is 0, so if I hit 25 and then +, what should the running total be?
>> Brian Holt: Just whatever was in the buffer, right?
[00:03:36]
So if I hit 25 +, or 5 +, I'm just gonna say runningTotal is assigned into buffer.
>> Brian Holt: Right, because at that point, that becomes your running total.
>> Brian Holt: Else,
>> Brian Holt: So let's assume that I hit 25 +, and then I hit,
>> Brian Holt: 30, and then I hit + again, right?
[00:04:10]
So let's just to visualize what that looks like, the actual one here. So if I hit 25 +, now my running total is 25. And I hit 30, if I hit +, what do you expect to see there? So if I hit 25 + 30, and then I hit + again, you wanted to actually do the last operation and keep track of that in the runningTotal.
[00:04:32]
So I'm gonna call that flushOperation, flushOperation, and I'm gonna pass that into buffer. And then we'll write a flushOperation function here in just a second.
>> Brian Holt: Okay, in any of these cases, you wanna keep track of what that previous operator was, though. So you're gonna say previousOperator = symbol.
[00:05:06]
>> Brian Holt: And then buffer is gonna be assigned 0. We could go and make it show what the running total is at that particular point in time, but that would be a little bit more involved logic. So let's just keep it simple and assign it 0.
>> Brian Holt: We okay with that?
[00:05:24]
>> Brian Holt: It's like the teacher asking, he's like, do you want more homework? [LAUGH] No, thank you.
>> Brian Holt: Okay, so that's it for the handleMath part. How do we feel about the handleMath part? Does what we wrote there make most the sense?
>> Speaker 2: I don't understand why we don't have to ask questions about whether we're doing multiplication, division, subtraction.
[00:05:50]
>> Brian Holt: So that's what flushOperation's gonna do for us.
>> Brian Holt: I'm trying to abstract out these pieces of logic, so that these functions do very small, very specific things, right? I'm trying to make it so these functions aren't any more than 15, 20 lines of code. You can always do that.
[00:06:09]
Sometimes things just take a lot of lines of code to get done. But in this particular case, we can keep these functions pretty small and pretty understandable.
>> Brian Holt: Yeah, we'll do that here in flushOperation. So the flushOperation is where you're actually gonna do the math, right? Here we're just kind of doing some bookkeeping of what buttons they were pressing and what the running total is gonna be.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops