0

Very simple question, not sure if there are any differences in these ways of creating a javascript "module". I'm hoping somebody can clarify it for me.

A)

var foo = function() {
    var bar = function() {
        console.log('test');
    };

    return {
        bar: bar
    };
};

B)

var foo = function() {
    function bar() {
        console.log('test');
    };

    return {
        bar: bar
    };
};

C)

var foo = function() {
    this.bar = function() {
        console.log('test');
    };

    return {    
        bar: this.bar
    };
};
BenMorel
  • 34,448
  • 50
  • 182
  • 322
mat-mcloughlin
  • 6,492
  • 12
  • 45
  • 62

4 Answers4

1

A and B are essentially the same, though there is a very minor difference between A and B due to function/variable hoisting, theoretically you could write code which would work in B but break in A, but practically speaking you'd have to really write weird code to do so.

C will work, but is conceptually wrong. The point of using this.funcName in a function is as a constructor (creating lots of objects using new Thing(). If you aren't using the function as a constructor you shouldn't be using that style as someone scanning the code may mistake the function as a constructor instead of its actual purpose which is a module.

mattmanser
  • 5,719
  • 3
  • 38
  • 50
1

At first, you forgot to execute the function expression: the module pattern is an IEFE. You just create a function.

Your last example is nonsense, it looks like a constructor function when assigning properties to this - and when executed as a IEFE it breaks (and using it with new has undesired effects; an when returning an object it's useless).

For the difference between the first and the second snippet see var functionName = function() {} vs function functionName() {}. In context of the module pattern, the function declaration is recommended.

Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
0

//Javascript Module Pattern
var person = (function() {
  var cname = 'CheapFlight';
  return {
   name: "Santosh Thakur",
   getAge: function() {
    return cname;
   },
   growOlder: function() {
    return cname + " Updated";
 }
 };
}());
person.cname = "New Company"
console.log(person.cname);
console.log(person.name);
console.log(person.getAge());
console.log(person.growOlder());
santoshthakur100
  • 11
  • 1
  • 3
-2

prefix var before a function makes it a "class"-ish, this means you can make many versions of it. This goes for A

For example: 

  var hi = function()
  {
    var bye = function()
    {
        alert("bye");
    }   
    bye(); // this will call bye
    var something = new bye(); // this will create a new instance of bye();
  }

  var something = new hi();
  something();

B means you can only call bar, not make a new instance of it inside the function.

C is the same as bar because of its scope

Class-ish:

var Dog = function( hair, type )
{
     this.hair = hair;
     this.type = type;
}

var fred = new Dog( "long", "Dalmation" );
alert( fred.hair );    

var dave = new Dog( "short", "Poodle" );
alert( dave.type);

This is a class ^

Jimmyt1988
  • 20,466
  • 41
  • 133
  • 233
  • Prefixing `var` does not in the slightest make it a class. – mattmanser Mar 21 '13 at 11:25
  • The `var` is irrelevant, all it will do is change when your function gets declared due to function and variable hoisting. `var Dog = function() {}` is just a different (and imo bad) way of writing `function Dog() {}` – mattmanser Mar 21 '13 at 11:39
  • @mattmanser If you do not declare Dog as a variable... you cannot make new instances of it... It is well documented across the internet. Be careful with that stuff hehe, it can be confusing I know! Try it in your editor, you'll see you cannot make instances of it. It'll only work for one :) I use it for all the games I write, creating arrays of my classes etc :D – Jimmyt1988 Mar 21 '13 at 11:44
  • Honestly, it's not: http://jsfiddle.net/Wvt8C/1/ Your way is *definitely* the unconventional way. Go look on MDN or at almost any tutorial. I've seen your style in at most a couple of articles. – mattmanser Mar 21 '13 at 14:24
  • meh, http://jsfiddle.net/72yvh / http://jsfiddle.net/RvrAd/ - lol, one works runtime, one works globally. You can have the last word now. :) Have a wicked day dude! And yes you can make instances of a function using new, which is awesome.. didn't know that! lol... You'd think after 7 years I'd know that ay lollll – Jimmyt1988 Mar 21 '13 at 14:59