Check out a free preview of the full Calculator Project: JavaScript course
The "Handling Symbols & Numbers" 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 breaks down the structure of the calculator functionality by planning how best to handle numbers and symbols.
Transcript from the "Handling Symbols & Numbers" Lesson
[00:00:00]
>> Brian Holt: Now we have here this button click and what I want to do, like I had this thought process that I want to have a separate function for handling numbers, right? Because the way you handle numbers is the same, right, whether it's five or seven, the code looks the same for that, so I want to separate that into its own function.
[00:00:16]
And then each one of these multiplied, divide, clear, equals, they're gonna be treated differently depending on which one we click, right? Because if I click add I wanna use the add operator. So I need to kind of separate that logic out. So I wanna have some sort of function handleSymbol and then I wanna have a function handleNumber, right?
[00:00:43]
That's the way I'm kind of choosing to break this down into a smaller problem that's easier to solve. So here, from button click, I either want to go to the handleSymbol if it's a symbol, or I can go, want to go to the handleNumber, if value is a number, right?
[00:00:57]
Feeling good? Do you feel okay about that? So let me show you an easy way to do that. There’s a couple ways. One of them that I’ve already shown you is you could say if parseInt, actually this is probably the easiest way to do it. So if I try and parseInt a value,
[00:01:22]
>> Brian Holt: And then I ask typeof,
>> Brian Holt: So parseInt is gonna try its hardest to turn whatever you gave it into a number, right? So if I give this 5, it's gonna say cool, this is 5. And then you're gonna ask what type of thing is 5? Well, 5 is a number if you parse the Int out of it.
[00:01:48]
So this is going to, this is a number, right? If I say, in fact, let's just take a look at what that looks like.
>> Brian Holt: Trash, and I say, parseInt of green. So, something that's obviously not a number, it's gonna say, that's not a number. So that's what this NaN is.
[00:02:14]
That means, not a number. But if I say parseInt of 5 like that, it's gonna come back a 5, right? If I say type of parseInt, a 5, I get number. And if I say type of parseInt of green, I get, well, that's a number. That's not what I wanted.
[00:02:36]
What does that give you back, parseInt green
>> Brian Holt: That's right. Okay, new thought is NAN.
>> Brian Holt: Is 5 NAN, no, is green, NAN, true.
>> Brian Holt: So, is NaN, it's just a function that's built in the JavaScript that can tell you if something is a number or not. So not this, this is not actually we want.
[00:03:15]
>> Brian Holt: isNAN.
>> Brian Holt: Okay, and then this is a number. So now I can separate these things, as this is definitely a number. This is definitely not a number. So now I can say here, this is not a number, so I can just say handleSymbol with value like that, this is gonna be a symbol and then here, I can say handleNumber and I wanna pass it as a number, right?
[00:03:59]
Because I wanna operate on it like it's a number. Yeah, we'll just handle the number like that. So, value. Okay? And this is going to be a numberString, so I'm going to call that a numberString, just to remind myself in the future like this is a number but I still have it as a string.
[00:04:26]
>> Brian Holt: If the buffer is === 0.
>> Brian Holt: String 0, make sure.
>> Brian Holt: So let's actually just go take a look what happens. Refresh here. If I press 5, what would you expect the number to become right now, on the screen?
>> Brian Holt: It should become 5, right? That would make sense, right, as a calculator.
[00:04:56]
So if it's === 0, then we're just going to replace 0 with 5. Right? Good. Does that make sense to you? If the numbers is, let's just go back to the one that actually works here. So if I click 5, you expect that to become 5. If I click 5 again, what do you expect to go there?
[00:05:15]
55, right? So I'm not doing real math here, I'm doing string math, right? I'm concatenating strings together. If I click 7, I expect 7 to go on there, right? So this is, we're mushing strings together, despite the fact that they're numbers.
>> Brian Holt: So here, I'm gonna say buffer = numberString.
[00:05:42]
>> Brian Holt: Else buffer = buffer + numberString, right? Or you can do the plus equals like I showed you before. So buffer = buffer + numberString or you can say buffer += numberString.
>> Speaker 2: That wouldn't work if I wanted to write 032 on my calculator, it would just give me 32.
[00:06:11]
>> Brian Holt: Correct, that's it for numbers, that's all you have to do to get numbers working correctly which is pretty cool, right?
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops