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's course:

Brian breaks down the structure of the calculator functionality by planning how best to handle numbers and symbols.

Get Unlimited Access Now

Transcript from the "Handling Symbols & Numbers" Lesson

>> 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.

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?

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?

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,

>> 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.

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.

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.

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.

>> 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?

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.

>> 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.

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?

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.

>> 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.

>> 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?