Let's start this section
by learning how numbers work in JavaScript,
how to convert values to numbers
and also how to check if certain values are numbers or not.
And before starting this section,
go ahead and open up your starter files
for this section so that we can take a look here
at the script.js.
So as I said, in the last section,
in this one, we will continue working
on our Bankist application, okay?
Now, what's different here
is that now we have actually different data.
So we have only two accounts now here
and each account now has a new array,
which contains the dates of the movements.
We also have the currency property
and a locale property.
Now, right, and so we will use this data
in later lectures of this section, okay?
Then down here, we have the complete application
that we built in the last section.
And if you want, you can go ahead
and replace this entire code that I have here
with your own code from the last section, okay?
What matters here is that we make the application work
just as it was working by the end of the last section.
All right?
So again, we have the same application,
only the starter data is a little bit different
but everything else is the same.
And so now let's start learning a little bit about numbers.
And the first thing that you should know about numbers
is that in JavaScript,
all numbers are presented internally
as floating point numbers.
So basically, always as decimals,
no matter if we actually write them
as integers or as decimals.
So we can show that by doing this.
So we need a new terminal here.
And so here is our application back again.
Let's close this and open up the console.
Give it some more space
and so you see that 23 is, in fact, the same as 23.0.
Okay?
And that's the reason why we only have one data type
for all numbers.
Also, numbers are represented internally
in a 64 base 2 format.
So that means that numbers are always stored
in a binary format.
So basically, they're only composed of zeros and ones.
Now, in this binary form,
it is very hard to represent some fractions
that are very easy to represent
in the base 10 system that we are used to.
So base 10 is basically the numbers from zero to nine,
while binary is base 2
and so that's the numbers zero and one.
Okay?
So as I was saying, there are certain numbers
that are very difficult to represent in base 2.
And one example of that is the fraction 0.1.
And that then results in very weird results like this.
And this is kind of a classic
or a running joke in JavaScript
because this result should, of course, be 0.3
and not with all of these zeros here.
But JavaScript simply has no better way
of representing this number.
So in base 10,
1/10 is simply 0.1.
And so that's very easy to represent.
But, for example, if we were trying to do 3/10,
then that is also impossible to represent for us, right?
It would be this number here
and three until infinity, okay?
And so in binary, the same thing happens with 0.1.
So we get basically an infinite fraction
and that then results in a weird result like this one.
Now, in some cases, JavaScript does some rounding
behind the scenes to try its best
to hide these problems
but some operations, such as this one,
simply cannot mask the fact
that behind the scenes,
they cannot represent certain fractions.
And by the way, many other languages use the same system.
For example, PHP or Ruby
and so don't let anyone make fun of JavaScript
because of this, okay?
So we just have to accept that it works this way
because we really cannot do anything against this.
So just be aware
that you cannot do like really precise scientific
or financial calculations in JavaScript
because eventually, you will run into a problem like this.
So .2, which will result in false,
which, of course, is incorrect as we know.
This should be true but well, this is simply an error
in JavaScript that we have to accept, okay?
All right, now that we know
how JavaScript represents numbers,
let's go back to actually working with them.
So we know how to convert a string to a number, right?
So that's like this.
But there's also an easier way.
So kind of a trick that we can use,
which is to, or actually this should be a string,
otherwise that doesn't make much sense.
But as I was saying,
there is an easier way,
which is simply plus 23 the string.
And this works
because when JavaScript sees the plus operator,
it will do type coercion.
So it will automatically convert all
the operands to numbers.
And so therefore, we see 23 here in both these cases.
So in this purple color, which are numbers.
So this here makes our code look a lot cleaner
in my opinion
and so let's now actually go to our project
and replace all the occurrences of Number,
simply with the plus sign.
So here.
And if I save it now, the Prettier extension
should get rid of the parentheses here.
And it does.
So here and here.
And here as well.
And that should be it.
Yeah, that's it.
Great.
And so our project will work the same
but the code is a little bit cleaner now.
Okay, so here we converted strings to numbers.
But we can also do something called parsing.
So we can parse a number from a string.
So on the Number object,
which is kind of this function here,
but it's also an object in the end.
Remember because every function is also an object.
And this number object here
has some methods to do parsing.
So let's use parseInt
and so here we can now specify a string
and that string can even include some symbols.
And JavaScript will then automatically try
to figure out the number
that is in this string.
All right?
And so here we get 30.
And this is actually a number.
It's not a string.
All right?
Now, in order to make this work,
the string needs to start with a number.
So if we have something like this,
then it's not gonna work
and we get not a number.
Okay?
So this is a little bit like type coercion
but even more advanced
because as we just saw,
it tries to get rid of unnecessary symbols
that are not numbers.
And this can be very useful, for example,
in this situation where we get some kind of unit from CSS
and then need to get rid of that unit.
Now, the parseInt function
actually accepts a second argument,
which is the so-called regex.
And the regex is the base of the numeral system
that we are using.
So here we are simply using base 10 numbers.
So numbers from zero to nine.
And most of the time, we are doing that
and so we should always pass in the number 10 here.
Okay, so that can avoid some bugs in some situations.
And you see the result here is the same.
But if we were working, for example, with binary,
then we would write two
and then the result would be completely different.
In this case, we cannot even see it.
But let's just keep using 10 here.
So this is with integers.
So that's what the int here stands for.
So parse integers but there's also parseFloat.
So Number.parseFloat
and let's now try 2.5rem.
And so now it reads the decimal number here
from our string.
So a floating point number.
Let's see what happens if we used Int.
And then we only get the integer part, right?
So it will then stop here at this decimal point
but that, of course, not what we want.
And by the way,
we could even have like some white space down here
that would not affect anything at all.
All right?
Now, by the way, these two functions here
are actually also so-called global functions.
So we would not have to call them on Number.
So this here also works.
Okay, but this is the more traditional
and old-school way of doing it.
Now in modern JavaScript,
it is more encouraged to call these functions
actually on the Number object, okay?
So we say that Number here provides something
called a namespace, all right?
So a namespace for all these different functions,
like parseFloat, and parseInt.
But anyway, let's now explore another function
of the Number namespace
and that is the isNaN.
So is not a number.
So Number.IsNotaNumber.
And we can use this one
to basically check if any value is a number.
Well, not any value but more about that later.
So for example, if we pass 20,
then here we got false.
And so is it not a number?
False, all right?
So let's try the same with a string.
20.
And so here we also get false, all right?
Because this also isn't not a number.
It's just a regular value, right?
But now let's try it by converting something.
So for example, this string,
if we try to convert it to a number,
then this will be not a number.
Right?
And so therefore, it is true.
So let's just do that here.
So yeah, this works as well.
And so you see this is, of course, not a number.
All right?
But let's try something else.
Let's, for example, divide 23 by zero
and maybe you know that dividing by zero
gives us infinite, okay?
So dividing by zero is something
that's not allowed in mathematics
and so it will give us infinity.
So infinity is also not not a NaN
and so therefore, we get false here as well.
So let me just demonstrate that here.
So indeed, this gives us this special value of infinity
that also exists in JavaScript.
And so this is not a number
is actually not a perfect way
for checking if a value is a number
because it doesn't consider this use case
and sometimes, this might very well happen.
And therefore, there is a better method called isFinite.
So Number.isFinite and let's try it
with the same numbers.
So here we get true.
And okay, and so basically this should be the opposite now
of this one
because this is not not a number.
But it is finite.
Okay?
Now, if you try it with 20,
the string, then here we get false
because it's not a number.
And so this is actually better to check
if something is a number or not.
And I know this sounds a bit confusing,
and the confusion comes from the fact
that we have this weird thing here
that is also called not a number.
All right?
And so therefore, I'm just telling you
that the isFinite method is indeed the best way
of checking if a value is a number.
So a real number, not a string.
All right?
So let's try again this one here.
Trying to convert it
and we know that this here is not a number.
So literally, this will be NaN.
Right?
And so this should be false as well.
And it is.
And now finally, this last use case,
which gives us infinity.
And so it is false as well.
So that's where the name of the method
actually comes from.
So isFinite and so infinity is, of course, not finite.
All right?
And so this method is the ultimate method
that you should use to check if any value is a number,
at least when you're working with floating point numbers.
So if you are sure
that you just need to check for an integer,
then you can use isInteger as well.
So let me just write here a comment as well.
So this one you should only use
to check if value is not a number.
So literally, not a number this value.
Okay?
But usually, in practice,
I never use this.
Whenever I need to check for a number,
this is the one to go
or if I'm using integers,
then I use isInteger as I was just saying before.
So we can do this.
Also this is also an integer remember
and so both are true, okay?
But then, of course, if we try this here,
it will be false.
Now, in our project that we're currently building,
there's not really a need to check
if any of the inputs is really a number or not
and so in this particular case,
we don't need to go back and change anything
but it's still good to know about,
especially this method here.
So this is your go-to
whenever you need to check
if something is a number or not.
And going back here,
the parseFloat function should be your go-to
whenever you need to read a value out of a string.
For example, coming from CSS.
So then you always get this
and it's very nice to be able
to read the number out of the string.