Jonas: Welcome back.
I hope you're still following along just fine.
In this lecture, we're gonna talk about
an extremely common pattern in JavaScript,
and that is Immediately Invoked Functions Expressions,
also called IIFE.
Imagine that we wanted to build a little game,
where we win the game if a random score from zero to nine
is greater or equal to five, and lose if it's smaller,
so just a small and silly game really.
But, we want to keep the score hidden in this game, OK,
so the score should not be visible.
Now, I'm sure that you can think
of a way of doing this, right?
And the answer is to write a simple function,
because we already know that variables
defined inside of a function,
cannot be accessed from the outside scope, right,
because the scoping chain only works the other way around.
So we could simply write something like this,
so function game,
without any parameters,
and then calculate a random score, right,
so Math.random times 10,
so, between zero and nine,
and then simply log to the console,
if the score is greater or equal to five.
So just a really silly game, right?
Then call it, and then, let's see, OK, so false.
So this doesn't really matter here,
because what I want to show you,
is that we can do this in a different way,
because, there are a few problems with this.
If the only purpose is to hide the score variable
from the outside,
so which means creating a private variable,
then we don't need to declare a whole function
with a name and then call it.
We can do this in a better way, and that is to use
an Immediately Invoked Function Expression,
which is usually abbreviated as IIFE.
So let me first write out how an IIFE looks like,
and then I explain you, how and why this works.
So we start with parentheses,
and then in here we simply write our function,
and actually our anonymous function so without the name, OK,
and then let me just actually copy this,
there is no need to write it again, OK,
and then we just invoke this function like this,
and this is it, this is an IIFE.
So, how does this actually work?
Let's start at the beginning.
So if you just wrote something like this,
so function, so just something like this,
so without the name, but also without the parentheses,
then the JavaScript parser would think
that this is a function declaration,
but since we don't have any name
for the function declaration, then it will throw an error,
so we basically need to trick the parser,
and make it believe that what we have here
is an expression, and not a declaration.
And the solution, is to wrap the entire thing
into parenthesis, because in JavaScript,
what's inside of parenthesis cannot be a statement,
and like this, JavaScript will know
that it should treat this as an expression,
and not as a declaration.
And then after that, we only have to invoke the function,
because, if we didn't do this,
so, if it would be like this without the parenthesis,
then it would never be called and never do anything,
and since we don't attach this to a variable,
then nothing would ever happened.
So, does that make sense?
This is just how the IIFE works, and just like this,
we can no longer access the score variable from the outside,
so we created data privacy here,
and let's confirm that actually.
So let me remove this,
let's try to console.log the score,
but we already know that this is not going to work, right?
So let's take this out here, OK.
Alright, so we have true, which is the result of this IIFE,
and then score is not defined, of course.
So outside here in the code,
we cannot see the score variable.
We can of course, also pass arguments into the IIFE.
So we could extend our function,
by adding a parameter called goodLuck to the game,
and the more goodLuck we add to the game,
then the higher the chance that we win the game.
So, very simple, let's just copy this,
just to show you that we can use a parameter here,
so let's call this goodLuck,
and then we subtract the goodLuck here,
OK, so, makes sense?
So the more goodLuck we add here, imagine we had five,
then five minus five would be zero,
and then the score would always be bigger than zero,
and therefore we would always win, right?
And how do we now pass the argument into the function,
right, we just need to add it here, so,
let's use the example of five, that I just gave you here.
OK, so let's just reload this,
and now this didn't work, because we have the error here,
so we first need to take out this part,
and then true, and true, and of course,
the second one will always be true.
So as you see, we can of course,
only call an IIFE once, right,
because this function is not assigned to any variable.
But that's no problem at all,
because in this case we are not using the function
to create a piece of reusable code,
all we want here, is to create a new scope,
that is hidden from the outside scope,
so where we can safely put variables.
And with this, we obtain data privacy,
and also don't interfere with other variables
in our global execution context.
So if this is to go, so if this is exactly what we want,
then IIFE is the perfect solution.
So again, this is not to create a piece of code
that we will reuse, this is just for data privacy.
Alright, so this is going to be yet another
very useful tool in your JavaScript toolbox.
This was, of course, just a toy example,
but later in our project, you will see how important
this IIFE pattern is in real-life applications,
in order to structure our code,
and obtain data privacy and code modularity.
So let's now move on.