Use closures for basic encapsulation when writing jQuery

If you are writing a lot of jQuery you’ll likely have files with loads of JavaScript functions and variables that may be completely independent and shouldn’t interfere with each other.

If you have a lot of this going on (or even if you don’t) you might consider wrapping up related variables & functions using closures that run immediately. These are also known as Immediately Invoked Function Expressions (IIFE) and are a fantastic approach to encapsulating your JavaScript.

A basic jQuery closure

In the example above, our IIFE is invoked immediately and encapsulates references to the jQuery, window, and document objects by passing them into the function.

A note on ‘undefined’

You’ll also notice that the function accepts the undefined argument with isn’t passed in when invoked.

This is just an added bonus as it simplifies undefined checks which can be a little finicky in JavaScript. By including the argument as per the snippet, you can simply check if a variable is defined using myvar !== undefined.

One last thing…

If you liked this article, I'd be incredibly grateful if you tweeted about it.

Also, I don't send emails often but when I do, I try to fill them full of useful goodies. If you like code snippets & dev tips, join my mailing list. There's no catch but I'll probably want to tell you about any new plugins & tools I build.