Instructor: In this lecture we're gonna think together
about how we wanna store our income
and expense data in a budget controller.
So in this lecture you'll learn how to choose
fine tune constructors that meet our application needs
and how to setup appropriate data structure
for our budget controller.
So lets go to our budget controller
up here which is still empty at this point.
Okay, so we need a data model for expenses and incomes here.
So we know that each new item
will have a description and a value, right?
And we also know that we should probably
have some way to distinguish between
different incomes or expenses.
And so basically we want them to have
a unique ID number as well.
Now how would you store this kind of data?
I know that I would choose an object
that sounds like the best choice
so an object that simply has a description
a value and an ID.
Now what do we do when we wanna create lots of objects?
Yes, we create function constructors
which we can then use to extantiate
lots of objects lots of expense and income objects
and like that we basically create a custom data type
for incomes and well for expenses
So lets do that.
So I'm gonna start with the expense
so Expense, and you already know
that for a function constructor
we usually use the capital letter here in the beginning
so we can distinguish them from the other functions.
Function and now we pass the data into it
that we want them to have.
So again they should have an id,
a description and a value.
And I hope that you remember how
we actually write these function constructors right?
So it goes like this
we say this dot id should be equal
to the id that we pass it.
And the same for the others so description
should be the description that we pass in
and then the value
so this dot value should be the value
that we pass into our function constructor
and that's it actually.
So again we choose to create objects here
through the expense function constructor
because there will be lots of expenses
and therefore this is the best way to do this.
Okay so that's the expense
now I'll also need this for the income
and actually it'll be exactly the same for now
so I'll just copy it, and then change it here to income.
It cannot be the exact same though
because later in the project I'll have
to add more things into the expense
so the expense will be different from the income.
So we have to keep them separate
now in case that we need some methods for them
we can of course put these methods
in a prototype property of the expense
or of the income for the function constructors here
like we did before.
So that all objects created through them
will inherit these methods
so instead of writing these methods
right into the constructors we can put them
into the prototypes and we already learnt that before right?
So this is better because in this way
they are not attached to each individual object
but instead its object will then inherit it
from the prototype, so yeah exactly like we learnt before.
But for now lets leave it like this because
we don't have any method here for now.
Okay so these are now private functions here
in the budget controller module
but let me just take this one and copy it here
to the outside just so that we can experiment
with it and then cancel, okay?
So just like this now we delete it after, okay?
So lets just go here and refresh this page
and then we hopefully have the expense here lets see.
So yes this is our function constructor.
So lets now create a new object using this.
Lets say var exp and remember we now have to use
the new keyword and why is that, do you remember?
It's because this new keyword creates a new empty object
and then calls the expense function
and points to this keyword of that function
to the new object that was created.
So when we're done set properties on the disk keyword
we automatically set them on the new object
that was created here.
And that's why function constructors work.
Alright, so I'm sure you'll remember this
from the lectures that we had before
so I just wanted to remind you of that.
And of course you can always go back to that
if you feel like it.
Alright so the id lets say it's one
the description can be again Test and lets say 100.
Alright, and if we now see the expense object
it is indeed as we wanted it to be
so description ID and value and then
the prototype is of course the object.
And here we see that this is an expense object now
because it was created through
the expense function constructor.
Okay so this function constructor works as expected
so I don't need this anymore here
because I really just want them to be private in here.
So that's it about function constructors
lets now think about the data structure
of this budget controller itself
and remember the budget controller keeps track
of all the incomes and expenses
and also of the budget itself
and later also the percentages.
And so we need a good data structure for that
so imagine that the user would input 10 incomes
so we would create 10 income objects right?
So where would you store all of these 10 incomes
I think that the best solution
is to store these into an array, very simple
so we could go ahead and create something like this
so var allExpenses and an empty array
where we're then going to store all of these.
And then we could do the same thing for the incomes
so incomes and then we could also say
var totalExpenses equal zero for example
and do the same thing for the income
and for our budget and so on and so forth.
Now this is maybe not the best solution right?
Because think about this, each time
that we can somehow aggregate a lot of information
into one nice data structure, we should definitely do that.
It's always better to have one data structure
where all of our data goes instead of having
a lot of like random variables flowing around okay?
So lets do that let's create
one big structure for everything
and I'm simply gonna call this one data okay?
So var data will be simply an object
where I'm gonna put all of this data
so what do you think of doing it like this?
So I'm just gonna copy this
and turn it into properties of this object.
So what do you think of this?
We can still do a little bit better right?
because both of these are arrays
which store all instances of either expenses or incomes
so what we can do here is to simply write
allItems and then allItems is also an object.
And now we say expenses is an empty array
and incomes is also an empty array
and this is better.
Here of course it's a comma and on the same thing
for the total expenses.
So instead of writing total expenses
and total incomes, we can say
totals simply, and then let it be an object
and then zero for the expenses and zero for the incomes.
And we're gonna use this one later
and we're later also gonna add more things in here
but for now that's enough to show you
how and why we should create a data structure like this.
And this will make even more sense
as you progress with the project, okay.
So now we have everything set up
here in our budget controller
so that in the next lecture we can actually create
a new item here when someone inputs
in your income or an expense into our user interface.
So we have our constructors and
we have this data structure here
ready to receive data so we can now move on.