Original subtitles

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.