3

I am somewhat new to Javascript (been using it for a few months), but overall I would probably consider myself a borderline novice/intermediate programmer. I am now working on a fairly large project in Javascript, containing many different functions, and I am trying to figure out some "best practices" for organizing my code.

I have seen a few examples of an approach that seems potentially very helpful. For example, see this Stackoverflow answer, or this page on best practices (do a Ctrl+F for return{). Essentially, you define a function in a variable, and that function simply returns other functions/variables:

var functionContainer = function() {
    return {
        function1 : function () {
            // Do something
        },

        function2 : function () {
            // Do something else
        }
    };
}();

This seems helpful in cases where I have multiple functions that do similar things; I can put them all into a "container" of sorts, and then call them with functionContainer.function1();.

Essentially, my question is: Is there a name for this technique? Can you recommend any sources for further reading? A lot of sources that I've seen don't go into great depth about what exactly is going on when you do this, and I want to be sure that I fully understand what I'm doing before I start shuffling around a bunch of my code.

I may post some separate follow-up questions later, depending on the responses I get here. If so, I will post links to them here, for anyone else who's curious.

Community
  • 1
  • 1
Daniel Charles
  • 465
  • 4
  • 14
  • 6
    Revealing Module Pattern. – Thalaivar Mar 20 '14 at 16:15
  • 2
    As vinoth stated, it is the revealing module pattern:http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript – David Duncan Mar 20 '14 at 16:15
  • possible duplicate of [How to use Revealing module pattern in JavaScript](http://stackoverflow.com/questions/5647258/how-to-use-revealing-module-pattern-in-javascript) – Thalaivar Mar 20 '14 at 16:28

3 Answers3

1

Revealing Module Pattern http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript

Addy Osmani's Analysis copied from link above:

Advantages

This pattern allows the syntax of our scripts to be more consistent. It also makes it more clear at the end of the module which of our functions and variables may be accessed publicly which eases readability.

Disadvantages

A disadvantage of this pattern is that if a private function refers to a public function, that public function can't be overridden if a patch is necessary. This is because the private function will continue to refer to the private implementation and the pattern doesn't apply to public members, only to functions.

Public object members which refer to private variables are also subject to the no-patch rule notes above.

As a result of this, modules created with the Revealing Module pattern may be more fragile than those created with the original Module pattern, so care should be taken during usage.

David Duncan
  • 1,858
  • 17
  • 21
0

That is just assignment and learning about how in javascript functions are first class types. You also have an object literal as well in there being returned with some functions defined as members. It's kind of like a revealing module pattern though for a proper approach I recommend the following reading: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript

t3rse
  • 10,024
  • 11
  • 57
  • 84
0

This is a just a simple object literal. Contrary to some of the other answers, it is not the revealing module pattern. In the revealing module pattern, your functions would be defined in the closure, not in the returned object literal.

However, I think your code is in error. I think you meant to write

var functionContainer = (function() {
  return {
    function1 : function () {
        // Do something
    },

    function2 : function () {
        // Do something else
    }
  };
})();

With this code, you can call functionContainer.function1();. (removed: You could not do that with your original code.) If this pattern is what you meant, then it is an IIFE returning an object literal.

I-Lin Kuo
  • 3,220
  • 2
  • 18
  • 25
  • 2
    _"You could not do that with your original code."_ Of course you could. It's a perfectly valid function expression. You may add the extra parentheses if you wish, but semantically it doesn't make any difference. It's just a visual hook to let the reader know that what's assigned to the variable is the result of the function and not the function itself. Try it out. It works without the parentheses. – Aadit M Shah Mar 21 '14 at 02:08
  • @AaditMShah is correct, thanks. I've modified my answer. – I-Lin Kuo Mar 21 '14 at 03:43