Within a function, you also have access to the global scope and every other scope above the function that you are in. In other words an inner function has access to the variables that are within the function that wraps it.
Right after the closing curly brace, just put an opening and closing parenthesis and the function will immediately be executed. The parentheses around the entire function expression aren’t necessary for the code to run, but are generally used as a signal to other developers that this is an IIFE, not a standard function. Some people like to prefix with an exclamation point (!) or a semicolon (;), rather than wrapping the whole thing in parentheses.
Knowing what we know about closures, we can create objects using the module pattern. By returning an object or variable and assigning it to a variable outside of the function, we can expose whatever we wish to the outside world, so we can have both public and private methods.
That’s essentially the module pattern right there. You can also use the arguments to send in and shrink the name of commonly used assets:
I sent in
window, which were abbreviated to
w, respectively. Notice that I didn’t send anything in for the third argument. This way
undefined will be undefined, so it works perfectly. Some people do this with
undefined because for whatever reason it is editable. So if you check to see if something is
undefined has been changed, your comparison will not work. This technique ensures that it will work as expected.
The revealing module pattern is another way to write the module pattern that takes a bit more code, but is easier to understand and read sometimes. Instead of defining all of the private methods inside the IIFE and the public methods within the returned object, you write all methods within the IIFE and just “reveal” which ones you wish to make public within the
There are a few advantages to the revealing module pattern versus the normal module pattern:
- All the functions are declared and implemented in the same place, thus creating less confusion.
- Private functions now have access to public functions if they need to.
- When a public function needs to call another public function they can call
this.publicFunc2(), which saves a few characters and saves your butt if
thisends up being something different than originally intended.
The only real downside to the revealing module pattern, as I said, is that you have to write a bit more code because you have to write the function and then write its name again in the
return statement, though it could end up saving you code because you can skip the
The last thing I wanted to talk about was using the module pattern for extending already-existing modules. This is done quite often when making plugins to libraries like jQuery, as you can see below.
This code is pretty flexible because you don’t even need the
var jQuery = or the
return statement near the end. jQuery will still be extended with the new method without them. It’s actually probably bad for performance to return the entire jQuery object and assign it, however, if you want to assign jQuery to a new variable name at the same time that you’re extending it, you can just change
jQuery on the first line to whatever you want.
That’s all there is for today, friend. These are common techniques and features, so even if you don’t make use of the knowledge from this post, keep it in the back of your mind just in case it comes up (which it probably will). Also, make sure to stop in again on Thursday to read about requestAnimationFrame: a new API coming out in browsers to make animations smoother and cleaner. Finally, don’t forget to share and comment below. Thanks and Happy Coding!