There's also a separate set of parentheses and these are essentially calling the function expression. So an IFFE stands for Immediately-invoked Function Expression, and there's a lot of verbiage right there, so let's break it down piece by piece. Now first off, this is a function that we want to execute immediately. Scripts execute in your HTML code as soon as this script tag is read, but any functions that you create within that script don't get executed until they are called. So if you remember the code from our first episode, we created a function right here called makeBoxes, but that function doesn't actually run until we invoke it, and we do that down here.
So an IFFE is going to create the function and then invoke it immediately, and it does that by making the function an expression, and then using these other set of parentheses right here. Now obviously, what we want to invoke is a function, but this is going to be a special type of function that wraps our entire script. Now the reason for that is that we want to protect any variables or functions inside this master function from being accessed. So functions inside this IFFE are going to create closures, which we discussed in Episode Two.
Functions inside other functions are going to remember the environment that they were created in. So any variables that I add right here will be accessible to any functions that I also add within this piece of code. Now anything outside this IFFE is not going to know anything about variables or functions within the IFFE, which means that our variables and our functions are going to be protected, and the reason that's important is because if I have another script that uses the same variables, it's not going to matter because I'm protecting all the variables I'm using right here.
Now because we're creating a closure by enclosing all of our code within this function and this function has no name, a function with no name is called an anonymous function, sometimes the IFFE will be called an anonymous closure. As I mentioned, making this function an expression is what allows it to execute immediately, and we're doing that with these extra set of parentheses. We're making this an expression with these two parentheses and then adding these other parentheses to execute it.
Think of this as what happens when you create a complicated addition, so you say, three plus four minus two, and you want to make sure that three plus four gets resolved before minus two happens. That's what we're doing here. We're creating an expression by putting the function in parentheses. So let's take a look at how to do that with our current code. So instead of just copying the pattern right here, I'm going to create sort of a series of functions piece by piece. So I'm going to create a new function here, and I'm going to call this enclose, 'cause our purpose here is to enclose all of this code, and then I'm just going to go to the very end, and paste that right there.
So if I do this, what'll happen is this function will get created, all this stuff is going to be just fine, but I'm never invoking that function, so it never gets executed. So just like what I've done before here is execute this makeBoxes function, I would have to execute this enclosed function right afterwards. I would have to say enclose, and if I save that, then my boxes will come back. Now another way to do this is to assign a variable, so I'm going to modify this so that it is a variable called protect, and I'm going to make that equal the function.
Now if I do that, I no longer need to call the enclose function. I can just add a set of parentheses right here to call this function immediately. Now I don't really need this enclose method because I'm not really calling this function anywhere. So I can just get rid of the name right here. This would create an anonymous function, and that will work just fine as well. So everything's working pretty well. However, if I try to get rid of this variable, again, because I'm not really doing anything with this variable, and just use the function by itself, I will get an error when I save this, and the problem here is that normally a function has to have a name, unless it's used in the different context where I'm assigning it to a variable.
So to prevent an error from being thrown right here, I'm going to add a set of parentheses. So I'll add one right here, and I'm going to add one here, and I'll go ahead and save. And this will work just fine. Let's go ahead and sort of collapse this function right here and these colors, so we can see sort of the IFFE available to us right here. Now if I want to, I can actually use this parentheses, and sometimes you may see this in some examples to pass along certain variables.
So since I have my colors right here, I could grab all these colors, and pass them along in this parentheses right here. Let's go ahead and format that a little bit differently, so just moving these over to the left. And then I'm going to take this, and put it in here in this anonymous function as a local variable. That way I don't have to declare this right here, and this will still work. Now, if you want to get a little bit fancier, you could actually get rid of this function right here and make this the anonymous closure.
So we are passing along a variable here called howMany. So what I'm going to do is just get rid of this function definition, and I'm going to pass the variable right here, homMany, as well as the colors. I'm going to not require this function call 'cause it no longer exists, and I'm not going to need this sort of closing part of the function right here, and now I can pass along. Let's go ahead and do 10 again, and then a comma, and then the array of colors.
Let's go ahead and save that, and let's go ahead and actually make it 20 so we could see that it works. And now you can see that we have 20 boxes. Our functions are working really well, and I think this a good example of how to use anonymous closures or the IFFE in a way that makes it easier to understand why it works and what we're trying to accomplish here. Now here are some pages where you can get more information about the IFFE pattern, and some courses you may want to consider taking.
Now if you have some ideas for this weekly series, maybe you want to share with me some questions you've been asked, or have asked in interviews. Connect with me at LinkedIn, or just about any other social media network like Twitter or GitHub at planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.