Javascript Module Pattern with anonymous functions

Question

I'm understanding the principle of module pattern but when I look at the different definition I struggle to understand how anonymous functions work. In particular, takes those three examples

Example 1, (from http://viralpatel.net/blogs/javascript-module-pattern/)

CalcModule = (function(){
                var pub = {};
                pub.add = function(a, b) {
                             console.log('in add()', a, b);
                             return a + b;
                };
                pub.sub = function(a, b) {
                             console.log('in sub()', a, b);
                             return a - b;
                };
                return pub;
})();

which is used as

CalcModule.add(5,2) //returns : 7

Example 2 (from Learning JavaScript Design Patterns 1.5.2, Addy Osmani)

var testModule = (function () {

  var counter = 0;

  return {

    incrementCounter: function () {
      return counter++;
    },

    resetCounter: function () {
      console.log( "counter value prior to reset: " + counter );
      counter = 0;
    }
  };
})();

which is used as

testModule.incrementCounter()

Example 3 (from http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/)

var s,
NewsWidget = {

  settings: {
    numArticles: 5,
    articleList: $("#article-list"),
    moreButton: $("#more-button")
  },

  init: function() {
    // kick things off
    s = this.settings;
  }
};

which, by the way, I don't know ho to use it.

As you see, the methods, for example add, incrementCounter and init are defined in different ways:

Example 1: by means of a private variable pub
Example 2: in the return method!
Example 3: as method of the constructor NewsWidget

Question: In my mind Example 3 is what I would do and I don't understand why Example 1 and 2 are not used in the following way

Example 1: CalcModule.pub.add(5,2)
Example 2: no idea

Rayan Bouajram · Accepted Answer · 2014-03-29 17:25:56Z

2

It seems like you need to understand how return works in functions in order to understand why the provided examples behave the way they do.

Example 1: You create a new variable pub and adding two methods to it: add and sub. At the end, you're returning the pub variable to CalcModule

So when you call CalcModule, it returns the following object with two methods:

CalcModule = {
   add: function() {...},
   sub: function() {...}
}

Example 2: Let's rewrite example 2 similar to example 1...

var testModule = (function () {

  var counter = 0;
  var pub;

  pub.incrementCounter: function () {
      return counter++;
  }

  pub.resetCounter: function () {
      console.log( "counter value prior to reset: " + counter );
      counter = 0;
  }

  return pub;
})();

We know pub is an object...

pub = {
   incrementCounter: function() { ... },
   resetCounter: function() { ... }
}

and we're returning pub to testModule... therefore...

testModule = {
   incrementCounter: function() {...},
   resetCounter: function() {...}
}

Hope this is helpful.

answered Mar 29, 2014 at 17:25

Rayan Bouajram

7435 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2279697 Over a year ago

So, is your Example 2 totally equivalent to my Example 2? I think I'm starting to understand. Thanks

Rayan Bouajram Over a year ago

@user2279697 That's correct, my example 2 is exactly the same as your example 2. Both of our examples return an object {}. The only difference is that my object is stored in a variable pub, and I'm returning back the value of pub (which is an object) -- whereas you're just returning the object directly. Try var str = "hello world"; return str; and return "hello world" -- they both do the same.

jfriend00 · Accepted Answer · 2014-03-29 17:24:08Z

0

In example 1, pub is assigned to the variable CalcModule via the return statement and the assignment of the return value so CalcModule becomes an alias for pub directly. That's why it's CalcModule.add(). That value that is returned from the IIFE return pub; gets assigned to CalcModule. It's as if one did CalcModule = pub.

In example two, testModule is assigned an unnamed object via the return value and that object has the methods incrementCounter() and resetCounter(). So, again testModule becomes a named alias for that object so you can then refer to the methods in that object as testModule.incrementCounter() and testModule.resetCounter().

Example 1 as shown has no advantage over Example 3 so if you are more comfortable with Example 3, then that's fine. Your Example 3 has a variable s that seems a bit odd and out of character because you're setting a global variable when NewsWidget.init() is called which is usually not a good design pattern. Perhaps you want to return that value from .init().

Example 2 is using the IIFE (immediately invoked function expression) to create a safe and private place to store the counter variable that is not in the global namespace, cannot conflict with any other code and cannot be access by other code example your own methods. This is essentially a way to create a "private" variable that only your methods can access. Example 1 could have also used that capability, but your Example 3 does not have the option to use that capability because it doesn't have the enclosing IIFE.

edited Mar 29, 2014 at 17:24

answered Mar 29, 2014 at 17:18

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

1 Comment

user2279697 Over a year ago

You took a good point! Would Example 2 lose the advantages that you listed above if I would declare it as: var myFun = function (a) {....}; and var testModule = new function(a); ?

miushock · Accepted Answer · 2014-03-29 17:25:33Z

0

The important part is to understand functions are first class citizen in JavaScript. Which means functions can be passed around and assigned to variables just like any other objects, so is modules.

In your first example, 2 functions (pub.add, pub.sub) as created as members of module pub, and then assigned to variable CalcModule

In second example, return variable is returning an object literal, which has two key/value pairs, with keys being function name and values being functions. assigning that object literal is equivalent to make the variable assigned as 2 member functions, which is creating namespace

answered Mar 29, 2014 at 17:25

miushock

1,1077 silver badges20 bronze badges

Collectives™ on Stack Overflow

Javascript Module Pattern with anonymous functions

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related