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.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 root if you need it.
Next up, let's get the maximum value
of a couple of values, okay.
So again, we use Math.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 will 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 parseFloat
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.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 a six.
And then we removed basically the decimal part
by doing Math.trunc on like this, okay?
Now the problem with this was
that then the highest number could be five.
And so we simply edit 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.
But now let's actually generalize this formula
so that we can use it from now on
to always generate random integers between two values.
So let's create randomInt
and we want to pass in a minimum and a maximum,
and then we want to return that number.
So as always, we need to start by removing any decimal parts
of the result of Math.random.
And then we will multiply this Math.random
by max minus min okay?
And then we add that one back on.
And so let me show you why we do this.
So it is because, it gives us a number between zero and one.
So Math.random is between zero and one, right?
So if we multiply this by max minus min
then we get a number between zero and max minus min, okay?
And now if we add min to all of this,
so the minimum value,
then we get min to max minus min plus min.
So we added min on both sides here,
basically of the equation.
And so then we can cancel this minus min plus min,
and we end up with a range between the minimum
and the maximum value that we specified, all right?
So let's just add that here as well.
So adding that minimum
that I just explained to in his last step.
And so this is how we end up with a nice function
which will give us always a number
that's going to stay between min and max.
So let's try that out.
So randomInt, let's say between 10 and 20
and so here we see 20 and let's try it a couple of times.
So I'm gonna save this file here a couple of times,
and you'll see that all of these results
are always within this range.
Now I maybe overdid it,
probably it's easier to just reload this page, all right?
So we haven't seen any 10 or any 11 yet,
but it's gonna work just fine
and we will get it if we reload it even more times, 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.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.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 us a couple of 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 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 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.
Let me 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 trunk minus this and also floor, okay?
And so now this one here,
just like before it 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 randomInt function should work in all situations
even if we give it a negative inputs here.
And so therefore, we need to work with floor here,
All right, so that's rounding integers.
Let's talk about a 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 toFixed method, okay?
And let's try it here with zero first,
just so we can see the result.
And so you see that with the zero,
it is converted to three,
but this three is a white here
while these other ones are pink or purple.
And so this means that is actually a string, right?
So toFixed will always return a string and not a number.
And that's important to keep in mind.
So if we start here instead of zero to three,
then it returns to 0.7 and it adds zeros
until it has exactly three decimal parts.
Just like we specify it 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 debts.
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
and definitely this would be very different
but now this is what we have to work with right now, okay?
Just keep in mind
Does 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 will 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.
Now 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 the loan like this.
And so that's applied to 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.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 have 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 toFixed 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 would be like 0.90
and here it should be 1300.00.
And the same also up here, all right?
So for that we can use the toFixed 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, in these three functions.
So displayMovements, DisplayBalance, and DisplaySummary.
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 .toFixed,
and then with two decimal parts, now right?
Now, let's just copy this from here.
So DisplayBalance, 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 to you in the previous lecture.
So everywhere we print a number, I will do this now, okay?
Then also on this result and also on the interest.
Let's give it a safe
and that's a lot better.
So it worked, you see now we get 0.00,
and here we also get to 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 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 logarhythmical functions or sinuses,
then of course you can always check out
the MDN documentation.