Redfern Dev

Basic Module Pattern JavaScript

10 April, 2016

Wrap your code in an immediately invoked function expression (IFFE). It runs immediately when you create it and has no name. Normally you would create a IFFE like this:

(function() {
  // your code
})();

It is common practice to remove the outer wrapping parenthesis and use a ! or + at the start of the anonymous function:

!(function() {
  function foo() {
    console.log("foobar");
  }

  foo();
})();

You can pass a variable into the IFFE so that it can be used within its local scope. Here I am passing in the underscore library using _ to be used within the module.

!(function(underscore) {
  console.log(underscore.VERSION);
})(_);

You can name the passed in variable (parameter) whatever you like so while you would normally use the underscore library by using _ you can now use it within the local scope using underscore. variable.

Another use might be to pass in the window object and create a variable called global within your IFFE. Now you can access the global scope by using the global variable.

var bar = "foo";

!(function(global) {
  console.log(global.bar); // foo
})(window);