CODEWITHSUNDEEP
javascript
contactmatt
contactmatt

Reputation: 18600

How to combine function declaration and new operator to one statement

Can I combine the declaration of the function with the assignment operator? I'm aware of immediately invoked function expressions but I wasn't sure off-hand if this approach would behave like calling the new operator.

It'd save quite a few lines of code if it could be combined. The function is always instantiated only once and assigned to a namespace variable, so there's no need to have them as separate statements if it's not needed.

function internalLoginMobileModule () {
    var self = this;

    self.initializeForm = function () {
        //
    };

    return self;
};

app.form.mobile.internalLogin = new internalLoginMobileModule();

Edit: Object initializers are very clean, but too limited in my case. I need the power that the lexical scope provides. These "modules" that are stored in the global namespace contain operations that demand "private" functions, and code re-use within the module (i.e. being able to access methods within that object using this/self. Here's an example of a module that I have demonstrating the use (notice the use of self, as well as the private function _setDefaultButtonForArea):

var UIHelperModule = function () {
    var self = this;

    self.getExtJsElementByName = function (name) {
      // Find Ext JS by name            
    };

    self.isExtJsElementEnabled = function (name) {
        return !self.getExtJsElementByName(name).disabled;
    };

    function _setDefaultButtonForArea (areaName, areaId, buttonName) {
        // Set Default Button
    }

    self.setDefaultButton = function (buttonName) {
        _setDefaultButtonForArea(null, window.thisForm.id, buttonName);
    };

    self.setDefaultButtonForAreaName = function (areaName, buttonName) {
        _setDefaultButtonForArea(areaName, null, buttonName);
    };

    self.setDefaultButtonForAreaId = function (areaId, buttonName) {
        _setDefaultButtonForArea(null, areaId, buttonName);
    };

    self.triggerClickForElementName = function (buttonName) {
        var foundExtJsElement = self.getExtJsElementByName(buttonName);

        // Make sure the button exists
        if (foundExtJsElement) {
            foundExtJsElement.el.dom.click()
        }
    };

  return self;
}

app.ui = new UIHelperModule();

Upvotes: 0

Views: 77

Answers (1)

Kevin Minehart
Kevin Minehart

Reputation: 492

Why not create an object literal instead? 

app.form.mobile.internalLogin = {
    initializeForm: function() {
    }
};

It'd be doing the same thing.

Edit: Bergi is right. This doesn't technically do the same thing. With this solution, you're not storing anything in the global namespace, which always runs the risk of breaking third party scripts.

And you're not wasting resources instantiating an object you'll only use once.

Also, you don't need to return this for the function to be evaluated as an object. Simply saying this.initializeForm = function() {} assigns 'initializeForm' to internalLoginMobileModule's prototype, so in your case you could get rid of the var self = this; and return self; lines and still instantiate it with new.

Edit #2, In response to your edit: There's really nothing you can do to 'clean it up', but not much, especially if you need the pseudo-access modifiers.

This is how I would write it, though, because this looks the nicest, which is important in most environments where readability should be favored over write-ability. In the case of JavaScript, it's very easy to write difficult-to-read code.

The code below is what you can almost consider a static context, and like you said it's inline. This may not look nicer with the first code example, but I can see this looking a lot better in your second example.

var myObject = (function() {
  var private = {
    privateMethod: function() {
      console.log('privateMethod');
    }
  };
  var public = {
    initializeForm: function() {
      private.privateMethod();
      console.log('initializeForm');
    }
  };

  return public;
})();

http://jsfiddle.net/9kgvj2dd/

I just realized though if you're going to use the above example that you don't use the words 'private' and 'public', as they are have been reserved words since ES2, and with the introduction of classes in ES6, you don't really want to be be creating conflicts that could potentially exist.

Upvotes: 4

Related Questions