---
title: Module Pattern in JavaScript and CoffeeScript
teaser:
tags: web,javascript
author: Britt Ballard
published_on: 2013-05-31
---

One of the shortcomings of JavaScript objects is the lack of support for private members. The ability to create private members makes external <abbr title="Application Programming Interface">API</abbr>s more meaningful and helps keep code more manageable and DRY.

The [Module Pattern][2], pioneered by Douglas Crockford while building the YUI library, is a mechanism that allows for creating public and private members in JavaScript.

This post looks at the pattern in both JavaScript and CoffeScript.

## The object literal

The foundational element of the Module Pattern is the [object literal][1], which provides the ability to create instances of objects without instantiating them.

One of the big wins provided by object literals is the ability to add namespaces to your JavaScript code. When you declare a variable outside of an object literal or function the variable is assigned to the `window` object. In this example, the `window` object, which represents the open browser window, can be thought of as an implied global namespace. However, writing variables and functions in the default `window` namespace can be problematic.

## Namespaces

JavaScript:

    // on the window object
    aFunction = function() {
      console.log('My function');
    }

    aFunction = function() {
      console.log('I just overwrote my original function!');
    }

    aFunction(); // 'I just overwrote my original function!'

    // taking advantage of object literals to provide namespaces
    Namespace = {}; AnotherNamespace = {};

    Namespace.aFunction = function() {
      console.log('My function');
    }

    AnotherNamespace.aFunction = function() {
      console.log('I did not overwrite my original function!');
    }

    Namespace.aFunction(); // 'My function'
    AnotherNamespace.aFunction(); // 'I did not overwrite my original function!'

As you’ll notice below we have to explicitly declare variables on `window` in
CoffeeScript. This is because CoffeeScript wraps all code in a [self-executing
function][3] to make it difficult to accidentally declare variables on
`window`.

CoffeeScript:

    // on the window object
    window.aFunction = ->
      console.log(‘My function’)

    window.aFunction = ->
      console.log('I just overwrote my original function!')

    window.aFunction() // 'I just overwrote my original function!'

    // taking advantage of object literals to provide namespaces
    window.Namespace = {};
    window.AnotherNamespace = {};

    Namespace.aFunction = ->
      console.log('My function')

    AnotherNamespace.aFunction = ->
      console.log('I did not overwrite my original function!')

    Namespace.aFunction() // prints 'My function'
    AnotherNamespace.aFunction() // 'I did not overwrite my original function!'

## Closures

Now that we’ve covered object literals and namespaces let’s take a look at the
real power the Module Pattern provides. Using JavaScript’s closures, the
methods and variables can be declared not publicly accessible.

JavaScript:

    Calculator = {};

    Calculator.arithmetic = function() {
      var prettyResultText = 'The answer is:';

      var printResult = function(answer) {
        console.log(answer);
      }

      return {
        add: function(addendOne, addendTwo) {
          var sum = addendOne + addendTwo;
          printResult(prettyResultText + sum);
        }
      };
    }

CoffeeScript:

    window.Calculator = {}

    Calculator.arithmetic = ->
      prettyResultText = 'The answer is: '

      printResult = (answer) ->
         console.log(answer)

      add: (addendOne, addendTwo) ->
        sum = addendOne + addendTwo
        printResult(prettyResultText + sum)

In the example above, there is a function object that behaves similarly to a
class.

JavaScript:

    var basicCalc = Calculator.arithmetic();

    basicCalc.add(1, 2); // 'The answer is: 3'
    basicCalc.printResult(”); // TypeError: Object #<object> has no method 'privateFunction'
    basicCalc.prettyResultText; // undefined

CoffeeScript:

    basicCalc = Calculator.arithmetic()

    basicCalc.add 1, 2 // 'The answer is: 3'
    basicCalc.printResult '' // TypeError: Object #<object> has no method 'privateFunction'
    basicCalc.prettyResultText // undefined

Taking advantage of a self-executing function and the Module Pattern, we can
define an object that behaves like a singleton with private members.

JavaScript:

    Calculator = {};

    Calculator.arithmetic = (function() {
      var prettyResultText = 'The answer is: ';

      var printResult = function(answer) {
        console.log(answer);
      }

      return {
        add: function(addendOne, addendTwo) {
          var sum = addendOne + addendTwo;
          printResult(prettyResultText + sum);
        }
      };
    })();

CoffeeScript:

    window.Calculator = {}

    Calculator.arithmetic = (->
      prettyResultText = 'The answer is: '

      printResult = (answer) ->
        console.log(answer)

      add: (addendOne, addendTwo) ->
        sum = addendOne + addendTwo
        printResult(prettyResultText + sum)
    )()

In the above example our very basic calculator will behave the same, but we’ll
only ever have one instance.

JavaScript:

    Calculator.arithmetic(); // TypeError: object is not a function
    Calculator.arithmetic.add(1, 2); // The answer is: 3

CoffeeScript:

    Calculator.arithmetic() // TypeError: object is not a function
    Calculator.arithmetic.add 1, 2 // The answer is: 3

## Self-executing functions

We can also use self-executing functions to create instances of prototypes
that share private members.

JavaScript:

    Calculator = {};

    (function() {
      var prettyResultText = 'The answer is: ';

      var printResult = function(answer) {
        console.log(answer);
      }

      Calculator.arithmetic = function() {
        return {
          add: function(addendOne, addendTwo) {
            var sum = addendOne + addendTwo;
            printResult(prettyResultText + sum);
          }
        }
      };

      Calculator.calculus = function() {
        return {
          derive: function(base, exponent) {
            printResult(prettyResultText + exponent + ' * ' + base);
          }
        }
      };
    })();

CoffeeScript:

    window.Calculator = {};

    (->
      prettyResultText = 'The answer is: '

      printResult = (answer) ->
        console.log(answer)

      Calculator.arithmetic = ->
        add: (addendOne, addendTwo) ->
          sum = addendOne + addendTwo
          printResult(prettyResultText + sum)

      Calculator.calculus = ->
        derive: (base, exponent) ->
          printResult(prettyResultText + exponent + ' * ' + base)
    )()

Above we’ve added an overly simplified calculus calculator to our arsenal.
Notice that both our arithmetic and calculus calculators share our private
methods.

JavaScript:

    var simple = Calculator.arithmetic();
    var complex = Calculator.calculus();

    simple.add(1, 2); // 'The answer is: 3'
    complex.derive('x', 2); // 'The answer is: 2 * x'

CoffeeScript:

    simple = Calculator.arithmetic()
    complex = Calculator.calculus()

    simple.add 1, 2 // 'The answer is: 3'
    complex.derive 'x', 2 // 'The answer is: 2 * x'

The Module Pattern helps keep your JavaScript code safe from collision and
better organized. Exposing a concise public <abbr title="Application Programming Interface">API</abbr> can make your JavaScript easier
to read. Using the Module Pattern requires additional effort up front, but pays
for itself in reduced maintenance down the line.

[1]: http://www.dyn-web.com/tutorials/obj_lit.php
[2]: http://www.yuiblog.com/blog/2007/06/12/module-pattern/
[3]: http://briancrescimanno.com/2009/09/24/how-self-executing-anonymous-functions-work/