Instructor: In order to make our app structure,
even a little bit better, let's now create an init function
such as we did with our pig game project before.
So in this lecture you're gonna learn how and why
we should create an initialization function
in our current architecture.
So here is our controller again and I feel like things
are all a bit scattered are here in the controller,
like these event listeners here are just hanging around here
and then up here we have this variable declaration
and so I think we should organize this a bit
and make it so that we only have functions here
in the controller.
So let's create a function here called setup event listeners
okay, so a function in which all our event listeners
would be placed because right now we have two
but over the course of this project we will probably
add some more, so let's do that.
So, setup event listeners,
so a function, and we don't need any parameters
and so I'm just going to copy these event listeners
right here into our function.
We don't need this extra space here, okay,
so here I left out a semicolon and now this can go.
And also into our function should of course
go this here, right?
because we'll only need these DOM elements here
for our event listeners.
Okay, so now we have a function that sets up
all our event listeners and we have a function
that gets called when we want to add a new item.
And these are both private functions, right?
they're not exposed to the public.
Now, if we want these event listeners here to be added
or to be setup then these lines of code here, of course,
need to run, right?
Which means that this function,
the setup event listener function has to be called somehow.
And up until this point this wasn't the problem
because all of this was here in this IIFE,
so in this Immediately-Invoked Function Expression
meaning that we didn't have to think about if this code
is executed or not
because it's automatically executed, right?
But now we need to call this function
and the best and most common way to do this
is to create a public initialization function,
which we're going to call init.
So let's now do that.
So since we want it to be public, we need to return it
in an object, right?
And we simply call it init.
Alright, so in this function we can, for example,
say that the application has started
with a simple console log just to test this.
And then we need to call our setup event listeners function
which was why we created this init function
in the first place, right?
So we setup event listeners, okay so that's it for now.
This init function will be useful for other things
in the future, so that's also a reason why we created this.
But for now this is enough here.
So this means that our event listeners
are only going to be setup
as soon as we call the init function,
so we need to do that and we do that
outside of the controllers.
So this will be the only line of code
that's going to be placed on the outside.
So controller dot init and without this line of code
nothing is ever going to happen
and that's because there will be no event listeners, right?
And without even listeners we cannot input data
and without data, there is no application.
So let's check out if this works.
Alright, so application has started,
let's see if this still works.
Yes, so we still see our object here
which we still print to the console.
And we can actually now go ahead and delete that
console dot log, if I could find it at least.
Here it is, okay, so yeah, this is our init function.
We created it because we want to have a place
where we can put all the code that we want to be executed
right at the beginning when our application starts
and right now, that is to setup the event listeners
but there will be more code in the future,
so more things that we have to do
right at the start of our app.
Alright, that's it for this lecture,
so let's now move on and create some function constructors.