Jonas: Let's now learn about
some more mathematical operations,
and also about rounding numbers.
And we have already been using
lots of mathematical operations.
For example, plus, minus, times, divided,
exponentiation, and so on.
And so we don't need to go over these again.
So let's start here with the square root.
And so just like many other functions,
the square root is part of the math namespace.
So math dot SQRT.
So this stands for square root.
And so all we need to do is to pass in the number
and then it will give us the square root.
And the same could be achieved using
the exponentiation operator as well,
by doing one divided by two.
And so that two is the square.
So we want the square root.
So we use one divided by two.
And actually we have to put this
into parenthesis and now it works.
All right, and the same would work for a cubic root,
for example, of eight, which would be two.
And so actually this is,
I think the only way you could calculate
a cubic route if you need it.
Next up, let's get the maximum value
of a couple of values, okay?
So again, we use math and dot max this time.
So let's just use a couple of numbers here.
And so as the name says, the maximum value
gets returned to us.
And this max function here actually does type coercion.
So it should now still give us 23, okay?
However, it does not parsing.
So if we try 23 pixels for example,
it'll then result in not a number.
So this does not work, all right?
And just as we have max, we also have min,
let's just put it back to 23.
And now here we get two, all right?
Now besides a couple of methods,
there are also constants on the math object
or on the math namespace.
And so for example, if we wanted to calculate
the radius of a circle with 10 pixels, we could do that.
So for that we use math.pi.
And for now, let's just take a look at that.
And so it is this constant
that you might know probably.
And so again, let's say that we get like 10 pixels
from the user interface.
So we can say parse float of 10 pixels,
and then we simply have to square this value.
This is how we calculate the area of a circle
with this radius.
All right?
Now another thing that is on the math object
is the random function that we already have been using
a couple of times.
And it's very important to be able
to generate good random numbers when we need them.
So before we have already created
random dice rolls, remember?
So that we did by math dot random.
And so this will give us a number between zero and one.
So as I reload, you see I get different values.
Then we multiply this by six,
and then we removed basically the decimal part
by doing math dot trunc, like this.
Okay, now the problem with this was
that then the highest number could be five.
And so we simply added plus one
to offset that truncation here.
So that cutting off of the decimal part.
And so now we're gonna get values here
between really one and six.
Okay, so this works great,
but let's now generalize this formula into a function
that we can then use as a random number generator.
And this is gonna be super useful in many apps
that you're gonna build throughout your career.
Now there is actually a problem with the implementation
of this function in the first version of this video.
And so you will see my screen changed now
because I rerecorded this part of the video later.
But that's not a problem at all.
And so let's now just start working
on this random number generator.
So we're gonna create a function, let's call it random int.
And here we will pass in a minimum and a maximum value.
So minimum and maximum
because we basically will want to generate
a random number between these two values.
And let's actually once again first call this function
so that we actually see how we can use it.
So for example, let's say we want a random number
between 10 and 20.
And so then this is how we would call this function.
Or maybe we just want a random number.
So a random integer between zero and three.
And so these are all the different ways
in which we'll be able to use this function.
And so let's now actually build out this function here
step by step, because this will teach you a lot
about random numbers and how to generate them.
So as always, let's start from math dot random,
which as you already know gives us a random number
between zero and one.
Now if we wanted to scale this, so basically if we wanted
to have a number, for example, between zero and two,
then we would multiply this by two.
So let's actually do that here first.
In order to understand how this is gonna work.
Even though we already did this here many times before.
So now we have, with this, here basically
a number between zero and two,
but it's not quite two, it's more like between zero
and 1.999999, right?
Because keep in mind that these are not integers,
these are basically decimal numbers.
And so now we will,
before we can move on, actually take out the decimal part
with math dot floor.
So basically rounding down this value.
And so with this, we will now always get a number
which is either zero or one.
Because again, this one here will stay
between zero and 1.99999, and so on.
And so if we take off that decimal part,
we will end up with zero or one.
So with this right now,
we can generate two different random numbers.
That's because we have these two right here.
But of course this needs to be dynamic,
so it needs to respond to the minimum
and maximum values that we input here.
So here for example,
we do not want only two possible random numbers,
but really 10.
Or actually 11,
because this minimum and this maximum
should also be included.
So if we count from 10 to 20,
that will actually be 11 numbers,
or here it'll be four numbers.
So zero, one, two, and three.
So four numbers, right?
So how can we get to these number of values that we want?
Well, here instead of hard-coding this value,
we just need to subtract the max
from, or actually the other way around.
So subtracting the minimum from the maximum.
So in this case, that would give us 20 minus 10 is 10,
and then here we would get three minus zero is three.
Just remember that actually here we had not 10
different random numbers, but 11.
And here, not just three, but four.
And so again, that's because both the minimum
and the maximum should be part of the range.
So to fix that, all we need to do
is to add plus one here, all right?
And so with this, what we have at this point
will already give us the correct
number of possible random integers.
Now, we're not done here yet,
but let's already start to log the result here
to the console of this one just so we can see
that we're on the right path.
So let's get rid of this one here.
So it's just this last result here.
So if we keep updating, then notice
how of course these numbers are not between 10 and 20 yet,
but really more between zero and nine,
or probably zero and 10.
So if we reload this a few times,
we should get all of these different numbers.
So again, between zero
and 10 with both of these values included.
So let's fix that.
And so basically that's gonna be the second step.
So we already did the first step, which was basically
to scale up this math dot random,
which initially is a number between zero and 10,
all the way to making it dynamic,
taking into account for minimum and maximum.
And so after this first step, now the possible number
of random integers is correct.
But now we need to basically then shift
this range to the correct place.
So basically that it can start not at zero,
but really at 10 here.
So all we need to do is just what I just said.
So basically adding this value right here
so that the range starts there.
So here at the very end,
so after all of this calculation here,
we just add the minimum value.
And so, beautiful, 19 is indeed between 10 and 20.
And if we reload this a couple times,
then you see here that now we already got the max value.
So that's nice to know that it is indeed included.
And it would be good to also get a 10 here,
just to make sure.
But well, I'm not gonna reload it a million times
until I see it.
But I'm sure that this is working just fine.
Let's also maybe duplicate this here
and try one between zero and three.
And so this should be easier to get
all of them here at least once.
So you saw that we got a three before,
and a two, now a zero.
And so that means that our random int function here
is absolutely correct
and ready to be reused in any of your future project,
if you ever need some random number between two values.
Now as I change my screen back
to the original, you will see
the old incorrect implementation of this function.
So please just disregard that function
that you see on the screen now,
and use the one that we just coded earlier.
Okay, next up, let's talk a little bit about rounding.
And let's start by rounding integers.
So you can add some comments to this here if you want,
but I'm just gonna leave it like this.
I will just add here, rounding integers.
And so we have already been using math dot trunc, right?
So what this does is to simply remove any decimal part.
And so we end up with 23 here, right?
Let's just take this one out, all right?
So again, this one simply removes any decimal part always.
But we have also other ways.
So we also have round.
So math dot round.
And so this one will always round to the nearest integer.
So this one is gonna be 23, and the other one, 24.
Let's duplicate this a couple times
to save us some time.
Then we also have ceil.
And this one will basically round down.
So both of these results should become 24.
And so that's these two here.
So line 318 and 20,
or actually it's these two.
So I'm confusing these numbers.
All right, so both of these are 24
because they will both always be rounded up.
And then we also have a floor.
And so these two will both be rounded down to 23.
And so that's what we get here.
And by the way, all of these methods,
they also do a type coercion.
So if we do this, then it's gonna work just the same.
Now you might think that floor
and trunc are very similar.
We just put this one down here, and indeed they do
the same when we are dealing with positive numbers.
So basically floor and trunc both cut off
the decimal part when we are dealing with positive numbers.
However, for negative numbers, it doesn't work this way.
So let me compare them here.
So trunc minus this and also floor, okay?
And so now this one here, just like before, gets truncated,
so it simply removes this part.
But floor now gets rounded to minus 24
because with negative numbers,
rounding works the other way around.
And so actually a floor is a little bit better than trunc
because it works in all situations no matter
if we're dealing with positive or negative numbers.
And so here, let's go ahead and replace this with floor.
So we're looking for a really generalized function here.
So this random int function should work in all situations,
even if we give it negative inputs here.
And so therefore we need to work with floor here.
All right?
So that's rounding integers.
Let's talk about floating point numbers.
Or we can also say decimals.
And now with decimals,
it works in a little bit different way.
So let me show you how.
So in decimals we have to specify
the number like this, in parenthesis.
And then on that number, we call the to fixed method, okay?
And let's try it here with zero first,
just so we can see the results.
And so you see that with zero, it is converted to three.
But this three is white here,
while these other ones are pink, or purple.
And so this means that it's actually a string, right?
So to fixed will always return a string and not a number.
And that's important to keep in mind.
So if we set here instead of zero to three,
then it returns 2.7
and it adds zeros
until it has exactly three decimal parts.
Just like we specified here.
All right, now let's add something more here
like two, three, four, five.
And let's say we only want two decimal places here now.
So this should become 2.35,
and indeed it does.
Okay, and if we now wanted to convert this result
to a number, then we simply would have to add
the plus sign here,
and then we already know that this here
converts a string to a number.
And indeed now it is purple again.
So with decimals it works differently than with integers.
And that's once again
because things in JavaScript evolved
kind of in a weird way in this kind of old language.
And if the language was designed today,
definitely this would be very different.
But yeah, this is what we have to work with right now, okay?
Just keep in mind that this here works in a similar way
than the string methods.
So this is a number, so it's a primitive, right?
And primitives actually don't have methods.
And so behind the scenes, JavaScript will do boxing.
And boxing is to basically transform this
to a number object, then call the method on that object,
and then once the operation is finished,
it'll convert it back to a primitive, okay?
All right, so once again,
this lecture looked a little bit like a reference
of a couple of different methods.
But to make it a bit more fun, let's now apply
some of this to our bankers project.
And the first thing that I want to do
is to round the requested loan amount.
So this one here.
So this looks weird.
Oh, it's because of this number.
Okay, so we could use this application
in this other page here on the other side,
but I prefer to have everything here in one screen.
But anyway, I can take a loan like this, right?
With the decimal part.
But in practice, I've never seen a bank
giving out a loan like this.
And so let's apply the rounding
to the loan functionality.
So that's here.
And the rounding then needs to happen right here.
So the value that we get from the loan here
needs to be rounded down, okay?
And then we actually do not need to convert it to a number
because as I showed you before, the math dot floor method
actually does type coercion itself, okay?
And we are using floor here
because we simply want to round any value down, all right?
So in this case, it would've been 150, and that's it.
So let's try that again now.
So let's ask for 150.56.
And so now we get just this, okay?
Probably I added one more zero there,
but that doesn't matter.
Next up, let's use the to fixed function,
or method, to make our numbers here
look a little bit nicer.
So here for example, we have this decimal part
with the two numbers, but here then we only have the 0.9.
And so this should be like point 90
and here it should be 1300.00.
And the same also up here.
All right, so for that, we can use the to fixed function
that we just learned about.
And so let's do that in all the places
where we display numbers on the screen.
And so, that's in these three functions.
So display movements, display balance, and display summary.
So let's start here at the top.
And so here we have the first occurrence.
So this movement here is a value,
so it's a number that we display.
And so on here we can simply call,
so dot to fixed, and then with two decimal parts.
All right?
And now let's just copy this from here.
So display balance.
So let's do the same here
and the same in the summary.
And so that will then hopefully also fix
this weird, really long number
that happens because of the rounding errors in JavaScript
that I just explained during the previous lecture.
So everywhere we print a number, I will do this now.
So okay,
then also on this result
and also on the interest, let's give it a save
and that's a lot better.
So it worked, you see now we get 0.00.
And here we also get nicely 0.90.
And the same down here,
we are now back to having
just two decimal places,
just as we requested, so to say.
So this lecture was kind of a short overview
of some more math functions, including some rounding
and also some other stuff,
like getting the max and the min value.
And yeah, so, good-to-know functions.
And of course, there are a lot more.
So if you need something like logarithmical functions
or sines, then of course
you can always check out the MDN documentation.