Original subtitles

And here goes the final coding challenge

of this section.

And in this one, let's improve the tip calculator

that we created earlier

but this time using loops.

So here is what I want you to do,

first create an array called bills,

which will contain the 10 test values

that we have down here.

Then create empty arrays for both the tips and the totals.

And so these arrays should be called tips and totals.

And if you need more details about this challenge,

you can always go back to the code of the previous version

that we wrote of this.

Then in number three,

use the calcTip function that we wrote before.

And so go back to that challenge really,

and copy the function from there.

There is no need to repeat the same code.

So use that function to calculate both the tips

and the total values for every single bill value

that is in the bills array we created in number one.

And to do that of course

use a four loop just as we learned

over these few last lectures.

And to my hint to help you a little bit

with this in case you need it

is to call the calcTip function inside the loop

and then use the push method to keep adding values

to the tips and the totals arrays.

All right?

So that's the basic challenge

and hopefully you can solve it

even if you need to consult the code that we wrote earlier,

there's absolutely no problem.

So there's no need to memorize anything.

All you need is to understand.

And so if you understood what we did up until this point,

you should be able to look at the code that we wrote

and then change that in order to fit this challenge.

Now, if you want to challenge yourself even more

and basically push what we learned to the limit,

then I have a bonus question

and here I want you to write a function calcAverage,

which will take an array called arr as an argument,

and dysfunction will calculate the average

of all the numbers and the array that had received.

Now, let me tell you that this is a very difficult challenge

for you at this point

because we haven't done anything like this before, okay.

So, if you don't want to get frustrated or something

then there's no need to try this one.

You can just watch the solution at the end of this video

but if you still want to attempt how to do it,

here are the steps

how to solve it to make it a bit easier.

So first of all,

you will need to add up all the values in the array

that a function receives.

And to do that,

you start by creating a variable called sum

and set it to zero

and then you will loop over the array using a four loop.

And in each iteration

you will add the current value of the array

to the sum variable.

And by doing this you will end up with all the values

in the array added together.

And then to calculate and return the average,

all you have to do is to divide the sum

that you just calculated by the length of the array,

because that is the number of elements.

So for example, if the array had just two values,

like 10 and 20,

we would add them together,

they would be 30 and then divided by the number of elements

in the array.

And so that would be two

and so the result would be 15.

Okay. That's how you create the calcAverage function.

And then I want you to use that function

on the totals array.

All right.

So basically I want you to calculate the average

of all the total values of the tips plus bills.

Okay.

So again don't beat yourself up if this bonus one

is too hard for you.

Anyway, good luck with this one,

and I see you here again in a minute.

Okay.

And let's start by grabbing

the calcTip function from earlier.

So that should be here.

Okay.

And that's why we keep all the code

in one neat file like this.

Next up we create the bills array,

and this one has quite a number of values,

but we can just copy them.

They're already almost in the correct format.

So, no and but a comma

then we create the empty tips and totals const

tips equals an empty array

and const totals,

another empty array.

And now is where the magic starts,

So basically where we will calculate

the tips and the totals,

so that is the question number three.

So use calcTip to calculate tips and total values.

So essentially what we will do is to loop

over the bills array and then fill up these two arrays.

So, for let i equals zero,

and we want this to run while the counter

is less than the length of the bills,

which is 10

and so the last index is nine,

and so that's the last element that's gonna be taken.

And now in here let's start by calculating the tip

and store it in a variable.

So const tip

is equal and now we're using the caLcTip function.

So we call it using parenthesis,

and now we need to pass in the bill value.

And what is the bill value?

Well, it is just a bill's array at the current position.

And now you might wonder

why I am able to declare

this tip variable here as a constant.

Am I not changing it in every loop iteration?

Well, actually that's not what happens,

actually in each iteration,

a new tip variable is gonna be created.

So we're not mutating,

we're not changing the original tip that we declare here,

in each iteration we will simply create a new one

and that's why we can't use const.

Anyway, now we have the tip calculated

and so we just need to push it into the tips array,

so tips dot.push,

and tier the tip,

and finally we need to push into the totals,

so total.push, tier tip plus the current bill

and we already know that is bills i.

Okay. And that's actually it.

Now you could have done it in a different way,

for example without this variable here at all,

you could have just put this code here and here,

but then you would have calculated the value twice

and that's just not necessary.

We just calculated once

and then we use it,

both to push the value into the tips

and into the totals.

Okay. And now as always,

let's check all the three arrays out in the console

and that's a lot of numbers,

but just by quickly looking at them,

everything looks correct.

Great. That's really great.

We basically just did the same

as we did in the previous version of the challenge.

But this time we did it using a loop

instead of manually creating the array

by calling calcTip with bills zero one and two.

So that's what we did in a previous challenge,

but this one is a lot better

because now no matter how many bills we have here,

the loop will take care of all of them

at the same time basically.

Okay. So that's the basic challenge.

I hope you arrived at the same result

that I did no matter how you solved it.

And now let's go for the bonus here.

So we're writing a function called calcAverage,

const calcAverage.

And once again I'm using a function expression here,

which is my favorite kind of function I would say.

And as we said, we will receive an array

and any array here will work.

So once again, we're building a generic function

which does not care what kind of values

it's gonna receive.

It can receive bills or tips

or scores or heights or masses

or whatever really.

It doesn't care what the values are.

And that's also why I gave it this generic name,

so it's just calcAverage

and not for example calcAverage totals.

Let's not do what we say or what I say here in 4.1,

which is to start creating sum variable

that starts at zero.

Then as we loop over the array,

we will keep adding the current value to that variable.

So, this time it needs to be alert

because this sum will of course be updated

as we loop over the array.

And now all of this is pretty standard at this point.

So equals zero,

i should stay below

the array.length.

And so at this time array is simply the array

that we're receiving in this function,

so it's this parameter

And now as I said,

as we loop over the array,

we will keep adding the current value to the sum.

So what I mean is some will be equal

to current value of sum,

plus the array that we received as an input

at to current position

and that's it.

We're just missing here,

the increment of the counter

but that's easy to fix.

And this one here could be even more condensed.

So let me just copy this one,

and comment out the original one,

because remember that we have a more shorthand operator

in JavaScript,

which we can use when we want to update a value.

So instead of sum equals, sum plus,

remember we can write some plus equal array i.

So this one is exactly the same as this.

So if you prefer, you can write just this version,

but this here is gonna do exactly the same thing.

Okay.

And just to see if this works,

let's actually test this now for now

by logging only the sum.

So console.log sum,

and now again to test it,

I will just call the function calcAverage

with simply an array of sum values,

so two plus three, plus six,

and we know that this will be 11, right?

And so now we can test this function here

just to see if this first part that we just wrote works.

Let's see,

and yes we get 11.

And so this logic here is correct.

So we got this array here into the function.

Okay. And so arr is now two, three, six

and so that's the array that we are done looping over.

Okay. So we end up with the sum

and now what we want to return

is simply the sum divided by a number of elements

in the array,

which remember is arr.length.

And that's it.

We can now get rid of this,

but now we need to lock the result to the console

if we want to see it,

because this function here now does not log it,

it simply returns it.

And remember that is a big difference.

So we know that some of this is 11

and 11 divided by three

is something like close to four.

So we could change this here to seven

then sum would be 12 and 12 divided by three is four.

And so then we can make sure that this function works.

So, it is four.

So, great.

This means that the function now works.

And so now we can use this function

to actually calculate the average total.

And so here we simply use the totals value

that we already created before.

And that's it.

So, the average total value of all our bills plus tips

is 275 and 19.

And let's actually do the same

with the tips themselves,

just to get an idea of the kind of tips that were paid here.

So the average tip is 4289.

Hopefully that partier was,

not too confusing,

but if you go slowly through the code step by step,

you will understand it.

All right.

And with this,

we finished the complete JavaScript fundamentals.

So we made a ton of progress here.

So congratulations for making it this far.

Great job really.

However, as you know

we are really just getting started here,

there is so much more to learn

and actually in the next section,

we will quickly configure our VS code editor

a little bit better

and also set up a better development environment.

So that's gonna be super useful

for writing code a little bit faster,

and I will also teach you some developer skills

that every developer should really have

but as always before moving on,

make 100% sure

that you understood all these fundamentals

from this section and to previous section.

So, if you want you can redo the challenges

or you can come up with your own small problems

or ideas to solve.

And by doing that you will reinforce

all these tools even better

and ultimately become a better developer faster.

Then when you're really ready,

let's together move forward.