What Is This JavaScript Pattern Called and Why Is It Used

What is this JavaScript pattern called and why is it used?

Your assumptions are almost correct. Let's review those first.

1. It assigns the return of a self-executing function

This is called an Immediately-invoked function expression or IIFE

2. It defines a local variable within this function

This is the way of having private object fields in JavaScript as it does not provide the private keyword or functionality otherwise.

3. It returns the actual function containing logic that makes use of the local variable.

Again, the main point is that this local variable is private.

Is there a name for this pattern?

AFAIK you can call this pattern Module Pattern. Quoting:

The Module pattern encapsulates "privacy", state and organization using closures. It provides a way of wrapping a mix of public and private methods and variables, protecting pieces from leaking into the global scope and accidentally colliding with another developer's interface. With this pattern, only a public API is returned, keeping everything else within the closure private.

Comparing those two examples, my best guesses about why the first one is used are:

1. It is implementing the Singleton design pattern.
2. One can control the way an object of a specific type can be created using the first example. One close match with this point can be static factory methods as described in Effective Java.
3. It's efficient if you need the same object state every time.

But if you just need the vanilla object every time, then this pattern will probably not add any value.

How is this JavaScript pattern called and how do I use it in the right way?

That is a JavaScript Object Literal or Singleton pattern. Here's a really basic example:

<script>

var exampleObj = {

    settings : {
        'test' : 'example'
    },

    alertSettings : function(){
        alert(this.settings.test);
    },

    gotCha : function(){
        var self = this;
        $('body').animate({"background-color":"red"},2000,function(){
            alert(self.settings.test);
            self.alertSettings();
        });
    },

    init : function() {
        this.alertSettings();
        this.gotCha();
    }

}

exampleObj.init(); // triggers the events

</script>

Init triggers the alertSettings() method and then gotCha(). You will notice that gotCha() redeclares this as self. That's because there is a function within a function inside gotCha() and this is limited (or scoped) to the function it is contained within. So the inner function refers to the self alias (or closure) because the variable it wants to alert is in the outer function this.

Quick and dirty. I hope this helps. *** Needs jQuery

What is this design pattern known as in JavaScript?

It's called the Module Pattern.

The parentheses around the function mean it's being evaluated immediately after being defined -- so in essence it's a Singleton. Since it's an anonymous function, the definition is not stored - so you cannot readily create new instances of this object without a few modifications (which will be discussed later).

You are correct, self contains the "public" methods and properties, as it were. Any variables that aren't defined in self are not visible to the outside because of the closure properties. However, any functions defined in self still have access to the private variables because in Javascript, functions maintain access to the context (including variables) in which they were defined -- with a few exceptions.. mainly arguments and this.

If you want to define multiple instances of this object, you would remove the parentheses (var Board = function () { ... }) and then use var obj = Board() to create an object. Note that it does not use the new operator.

What type of Javascript Pattern is it?

This is called the module pattern (at least thats the name I know it by).

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

Some benefits of this pattern include:

• Encapsulation, giving you the ability to define private fields in your closure.

• You can make sure that the undefined value is always correct by specifying a third parameter of undefined and passing nothing to it (this is because undefined can actually be overwritten in javascript.)

• Javascript namespacing for clearer separation of concerns.

And example of using the undefined method is this:

var AppName = (function (parent, $, undefined) { //add parameter for undefined here
  var controller = parent.controller = parent.controller || {};

  controller.index_page = function (parent) {
    var createPage = parent.createPage = parent.createPage || {};

    createPage.init = function () {
      alert('javascript initialized');
    };
    return createPage;
  }(controller);

  return parent;
}(AppName || {}, jQuery)); //do not define anything for the undefined parameter here.

The purpose of the parenthesis at the end of the function is to invoke your function immediately and form a closure, giving you access to public variables/functions whilst hiding private variables/functions. This is known as an immediately invoked function expression(IIFE) sometimes called an iffy.

What is this pattern called in Javascript? does it have a name?

Javascript Module Pattern and yes it attempts to mimic OO Programming with encapsulation

What is this design pattern known as in JavaScript/jQuery?

This is a jQuery plugin.

(function($) { // code }(jQuery)); gives you a new function scope so your names are not dumped into the global scope. Passing jQuery as $ lets you use the $ shorthand even if other Javascript libraries use $.

$.extend is a jQuery method to copy properties from one object to another. The first argument true means it should be a deep rather than a shallow copy. By extending window, new global properties are created, in this case, Slick.

The $.extend(this,...) at the bottom is in a capitalized function SlickGrid. SlickGrid is meant to be used as a constructor, in which case this will be the newly-created object, so this extend is adding properties to the object. They are effectively public members. In this code sample, measureScrollbar is private: it is only visible to the code defined in this function, not outside it.

You can create a number of grids with:

var grid1 = new Slick.Grid(blah, blah);
var grid2 = new Slick.Grid(blah, blah);

In the code you've shown, the only thing these two instances will share is the scrollBarDimensions variable.

What do you call a pattern that uses a eventBus to interact with all its components ( Slides / Dots / Arrows )

Depending on the implementation, it may be considered as an Observer pattern, or a Mediator pattern.

This subject was already treated here: Is Eventbus a Mediator or Observer Pattern?

Javascript Revealing Module Pattern - this and internal function calls

Your example combines three of the four ways in which to invoke a function.

Constructor Invocation

var it = new vm();

Inside of function vm, this refers to the object instance you are returning. This is expected.

Method Invocation

it.pub();

Inside of function pub, this refers to the same object instance as is referenced by it. Again, this is expected.

Function Invocation

pri();

Inside of function pri, this refers to the global object. This is not expected, and is considered to be a mistake in the JavaScript language. The 'pub' function was invoked with the method invocation pattern, and so it is natural to assume the this should always point to the current function/object when used inside it.

One remedy is to store your returned object in a local variable inside the vm method, and then due to scoping, pub and pri methods will be able to reference the object instance safely.

function vm() {
    var pub = function () {
        alert("from pub: " + that);
        pri();
    },
    pri = function () {
        alert("from pri: " + that);
    };

    var that = {
        pub: pub,
        pri: pri
    };

    return that;
}

Does this way of defining JS objects have any purpose?

It's called the module pattern http://toddmotto.com/mastering-the-module-pattern/

The main reason is for you to create truly private methods and variables. In your case, it's not meaningful because it's not hiding any implementation details.

Here's an example where it makes sense to use the module pattern.

var MyNameSpace = {};

(function(ns){
    // The value variable is hidden from the outside world
    var value = 0;

    // So is this function
    function adder(num) {
       return num + 1;
    }

    ns.getNext = function () {
       return value = adder(value);
    }
})(MyNameSpace);

var id = MyNameSpace.getNext(); // 1
var otherId = MyNameSpace.getNext(); // 2
var otherId = MyNameSpace.getNext(); // 3

Whereas if you just used a straight object, adder and value would become public

var MyNameSpace = {
    value: 0,
    adder: function(num) {
       return num + 1;
    },
    getNext: function() {
       return this.value = this.adder(this.value);
    }
}

And you could break it by doing stuff like

MyNameSpace.getNext(); // 1
MyNameSpace.value = 0;
MyNameSpace.getNext(); // 1 again
delete MyNameSpace.adder;
MyNameSpace.getNext(); // error undefined is not a function

But with the module version

MyNameSpace.getNext(); // 1
 // Is not affecting the internal value, it's creating a new property
MyNameSpace.value = 0;
MyNameSpace.getNext(); // 2, yessss
// Is not deleting anything
delete MyNameSpace.adder;
MyNameSpace.getNext(); // no problemo, outputs 3

---

Related Topics