Instructor: 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.