Instructor: Let's now do the actual calculations
of the total incomes, total expenses and the budget.
And so in this lecture, you're gonna learn how and why
to create simple, reusable functions with only
one purpose each; and also how to sum all elements
of an array using the forEach method.
So let's go to work.
So this is how we left the updateBudget function
in a controller after the last lecture.
So it's now time to calculate the budget here in step one.
And for that, we're gonna create a public method
in the budgetController, right?
And so it's up here.
And I'm gonna call it calculateBudget.
So very simple.
And it's a function, of course.
And in here, there's a couple of things that we have to do.
So I call this the calculateBudget function,
but in fact, we're also going to calculate first
at a sum of all incomes, as well as the sum
of all the expenses.
So the total income and the total expenses.
And then of course the budget, which is one minus the other,
and then also the percentage.
So let's show that on the user interface.
So this is the percentage that I'm talking about,
and this is very simply the percentage of our income here
that we have already spent.
So it's our expenses.
So let's write all we have to do here, so
calculateTotal income and expenses
and calculate the budget,
which will of course be income minus the expenses, right?
And then finally,
calculate the percentage of income
that we spent, basically.
Okay, so let's start with the beginning right here.
So calculate the total income and expenses.
So this sounds like we're gonna do the same thing
two times, right?
Once for the income and once for the expenses.
So I think this sounds like making an extra function
for this, right?
So a function that receives if it's either the income
or the expenses that we're talking about so that we want,
and then sum of the items.
Okay, and since we don't want no one else to use
this function, we can make it simply a private function.
So it's just an internal function to help this
calculateBudget method, okay?
So I'm going to do it out here,
and I'm simply gonna call it calculateTotal,
calculateTotal.
And then what we need to say here is simply if we want
to calculate the total expenses or the total incomes.
So again, gonna use our type keyword, okay?
Okay, so how are we gonna do that?
So we already know that all of the items are stored
here in the allItems object, right?
And all the expenses are in this array,
and all the incomes are in this array, right?
So at some point of our application,
there are gonna be a couple of objects
in both this and these arrays here.
So what we need to do is to get this array
then loop over it, and then sum all of the values.
So add all of the values together.
And so the first thing that we need to do
is to simply create a sum variable
which will store the sum, okay?
And set it to zero, because that's of course
the initial value.
Okay, and then we loop over this array.
And do you remember a great way that we learned
in one of the last lectures about looping over an array?
It was the forEach method, right?
So let's get our array and use the forEach method on it.
So data, which is where all of this is stored,
then the allItems object, okay?
And then, such as we did before, we use our type argument
to select if you want to expense array
or the income array, right?
So this type here will, of course, be either exp
or either inc, such as we've been using before.
All right, so this is the array, and now we can use
the forEach method.
And remember, this accepts a callback function, okay?
So function.
And then this function here has access
to a couple of parameters.
Remember that?
So we can access the current value, the current index
and also the complete array.
In this case, we only need the current element, okay?
So I'm gonna call it cur simply.
And remember, we can do that.
We can call it whatever we want.
And so now I say that the sum should be equal
to the previous sum, plus the current value.
And so it's cur.value.
And it's cur.value, because value is the name
that we gave it here, right?
So in the expense and in the income,
they both have this property called value,
which is where we store the value.
And so this cur here now refers to either the income
or the expense object that is stored
at the current position of the expense or the income array.
Okay?
Okay, just to illustrate this, let me just write
a simple example here, okay,
just so this makes more sense to you.
So the initial sum is zero, right?
And imagine we have an array, which has these sums.
So 200, 400 and 100, for example, okay?
So in the beginning, our sum is zero.
So in the first iteration, our sum is zero,
and so the sum will be zero plus 200,
because it's the first element of the array.
The first value, in this case.
So notice that these are only values.
This is just an example to see
how this iteration works and how we calculate
the final sum.
So in the next iteration,
then our sum is already 200, right?
And so now sum is equal to 200 plus
the 400 from the next element.
So that's a 600.
And so in the next loop in the next iteration,
it will be 600 plus 100.
So 700 in the end, all right?
So this is how this loop works.
Now we can do this better, right?
Remember there's this operator where we can put a plus here,
and then we don't need this.
So this is a bit simpler.
And so after this loop, we have our sum stored here
in this value.
And what are we gonna do with this then?
We could return it, but I think it's even better
to store it in our global data structure.
So in our global data model, which we have here, okay,
so this data object, which contains all of our information;
and so in here, we, before, already put this totals object.
So now we can use this and store our sums in here, right?
So let's do that.
Data.totals.
And then again, we use our type,
because once again there is expenses and income.
And then we simply say that this should be equal
to the sum that we just calculated.
And that's it.
So this function is completed now.
So let's use it here and practice.
So we're going to go back to our calculateBudget method.
And so now I can call our private function.
So I just say calculateTotal, and here it is.
And I first do it with expenses, and then
I do it with income.
And that's it.
So after running these two lines or a data structure here
has these two values here filled.
So they are not zero anymore.
So they are now set to the total expense
and the total incomes.
Okay, and now we just need to calculate the budget.
And where do you think I should stored this budget?
Exactly.
Once again, we are going to use our global data structure
that we have here.
So we're gonna create a variable in here
called budget, and set it initially to zero, okay?
And now we can go ahead and fill this value here
with our budget that we're gonna calculate.
So we say data.budget will be equal
to the income minus the expenses.
And remember where these values are stored.
Exactly, they are also in the data structure.
So data.
And now remember, they're in the totals.
Totals.income.
And now minus data.totals.expenses.
Okay.
So this retrieves these two values here
from our data instructor, then calculates one
minus the other and then stores it again
in the data structure in the budget property.
And now the final task of this method is to calculate
the percentage of income that we spend.
So once again let's create a new property here
and simply call this one percentage
and also set it to zero in the beginning.
Or actually, let's set it to minus one, because minus one
is usually a value that we use to say
that something is nonexistent.
So if there are no budget values and no total expenses
on incomes, then there cannot be a percentage.
So we set it not to zero but to minus one.
So it doesn't exist at this point.
And so now we can store the percentage that we calculate
also in a data structure.
So data.percentage.
So the percentage of income that we spend
is the expenses divided by the incomes, okay?
So data, totals, expenses
divided by data totals.income, okay?
So just an example, let's see.
Imagine we have an expense
of 100,
and an income of 200.
Then we spend 50% of our income, right?
So this is equal to 100 divided to 200, right?
And this is actually 0.5, so we have to multiply it by 100.
So let's do that here as well.
So I'm gonna put some parenthesis here,
which are actually not necessary.
But this way, it looks a bit better, a bit more structured.
Now the thing is that this will have a decimal.
So imagine it would be, here, instead of 100,
it would be 300.
Then we would've spent 33.333 and so on.
So this would be 0.3333.
But we don't want that, we really just want
this integer part here, so let's also round this result.
And we already did that before.
So remember, we use the Math object.
And in here, there's a nice method called round.
And so this will round whatever we input here
to the closest integer.
Okay.
And with this, we calculate our percentage.
So we have now everything that we wanted this method to do.
So we have our total income and expense,
we have our budget and our percentage.
So let's now use this method in our global app control.
So this is down here.
So calculate the budget.
So we say budgetController, as you already know,
and then our newly created method, which is calculateBudget.
All right, so this calculates the budget.
And now we need a method which returns the budget to us
so that we can store it here in a variable
and then pass it on to the user interface controller,
which is then gonna display it here in this third point.
So let's do that very quickly.
So again, in our budgetController,
we need a new method.
And this is gonna be called getBudget.
And again, I'm doing it like this.
I'm creating a method only for returning
something from our data structure or from our module
so that you get used to this whole philosophy
of having functions that only retrieve data,
or functions that only set data.
So let's write this very simple method here.
And again, budget returns not only to the budget itself
but also to the total incomes and expenses
and the percentage as well.
So we wanna return these four values.
And what's the best way to return four or even more values
at the same time?
Exactly.
We're gonna use an object.
So we simply do it like this, return this object.
And in here, we now create the four properties
for the four values.
So budget will be data.budget, right?
Because remember, that is the place where we store
the result of that calculation, okay?
Then we want the total income.
So just like this.
And this is stored also in the data structure
in the totals,
and then in the inc property.
Now the same for the expenses.
And finally, we also want the percentage, of course.
And that's it, that's all that this function,
that this method here has to do.
So let's now use it here.
And this time, we return something so we have to store it
in a variable, of course.
So let's simply call it budget, okay?
So var budget
is the result of calling
budgetController.getBudget.
And that's it.
So now we should have the budget stored here
in this variable.
So we are ready to display it in the user interface.
But I'm gonna leave that to the next lecture.
So right now, I just wanna console log this object
so that we can see if everything we did before
is working, okay?
So budget here.
And remember, this whole updateBudget function
is called each time we enter a new item
into the user interface, right?
So let me see.
So it comes from here, okay.
So the ctrlAddItem function is called each time
that we input a new element, okay?
So this calls the updateBudget function,
which is this one, which then in turn called
all of these methods here.
So the calculateBudget and getBudget methods.
So this console.log here will appear in the console
each time we input a new item.
So let's now test this.
So let's say Project.
And okay.
So down here we have our budget object, okay?
And let's take a look at it.
So the total expenses are zero,
the total income is 2100,
and the budget is, of course, 2100.
And there is no percentage.
So everything seems to be working, right?
Let's just add another one.
So I sold my car again for $1500.
And so let's see the budget now.
So this is the sum of 2100 plus 1500,
and this makes 3,600.
And the budget is also 3,600 because we don't have
any expenses yet.
So let's say we went on a holiday, which was $1800.
And now here we are.
Oh, actually I did this wrong,
I put it in as another holiday, as another income,
so I have to change this of course,
so let's now say Holiday for 3,600.
That's because I wanna show you the exact percentage.
Okay, so now this seems to be working.
So the budget is 1800 because it's 5,400 minus 3,600.
Yeah, makes sense.
And then the percentage is 67.
And that's because, let's calculate it here,
3,600 divided by 5,400
is this number here.
And if we multiply this by 100,
then it gives 67% if we round this, okay?
So this is actually working,
though there's only one thing to correct,
and let me just reload this for that.
Image that we only have expenses, okay?
So let's say again holiday for $900.
And now we have this problem here,
the percentage gives us this weird Infinity value.
So Infinity.
And that's because we cannot divide anything by zero,
which is what we attempted to do here.
So we did 900 divided by zero because we don't have
any income yet, and that's not allowed in mathematics.
And so we have to fix that in our code.
So let's go back to the method where we calculate this.
And it's right here.
So what we have to say is that we only want this calculation
when we already have some income.
So when the total income is greater than zero.
So let's use an if statement.
So if the data
totals income is greater than zero,
then we want this to happen, okay?
And if it's not,
then we simply want the data percentage to be minus one,
which, as I explained before, is basically the nonexistents.
So when there's no percentage to calculate,
we just say it's minus minus one,
and we'll use that minus one later when we display
this percentage on the user interface, okay?
So let's now very quickly test this again.
So add an expense,
holiday for $900.
And now, here it is.
So now our percentage is minus one,
and everything else is also working.
So the total budget is negative, of course,
because zero minus 100 is minus 900.
So the next step is, of course, to add this budget here
to our user interface right here in this field.
So here and here and here and here.
So let's do that right in the next lecture.