Original subtitles

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.