Javascript Module Pattern Uncaught Reference Error

Question

I've been following this tutoral, and when referencing Module as an argument in ModuleTwo, everything works fine until I comment out Module.

My understanding is that the double pipes || and empty object {} will create an empty object in place of Module if it's undefined, but instead I'm getting an error in the console.

var Module = (function () {

  var privateMethod = function () {
    // private
  };

  var someMethod = function () {
    // public
  };

  var anotherMethod = function () {
    // public
  };

  return {
    someMethod: someMethod,
    anotherMethod: anotherMethod
  };

})();

var ModuleTwo = (function (Module) {

    Module.extension = function () {
        // another method!
    };

    return Module;

})(Module || {});

When you say you "comment out Module", do you mean the variable declaration (i.e. ` var Module = ...) or are you commenting out the (Module || {} )` line?... — War10ck
– War10ck, Commented Aug 7, 2015 at 19:34

Anton Strogonoff · Accepted Answer · 2015-08-07 20:10:05Z

2

Basically, there’s an error in the tutorial. One way to make things work was suggested by rplantiko, but it might be easier to just write window.Module || {} instead of Module || {}.

How things work here:

Accessing a non-existent property of any object yields undefined. However, referencing a variable that hasn’t been declared yields ReferenceError (so your understanding was a little bit off there).
Browser puts all global variables as properties onto global window object. Module in the tutorial is a global variable, because it’s declared outside all functions, so you can access it via window.Module, which will not cause ReferenceError if undefined (per previous point).

It might be a good practice to explicitly assign to window any global variable you define (e.g., do window.Module = (function () { … if you intend to make Module global), but that’s arguable and out of scope of this discussion.

edited Aug 7, 2015 at 20:10

answered Aug 7, 2015 at 19:58

Anton Strogonoff

34.4k8 gold badges58 silver badges68 bronze badges

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

1 Comment

Anton Strogonoff Over a year ago

sure, glad if it helped.

rplantiko · Accepted Answer · 2015-08-07 19:40:27Z

2

When you apply the function defining your 2nd module to (Module || {}), the symbol Module cannot be resolved if the Module hasn't been declared earlier, which always gives a JavaScript error. If you want the 2nd Module to be defined even in the absence of the first Module, try the following:

var ModuleTwo = (function(Module) {
   ...
   })(typeof Module == 'object' ? Module : {} );

answered Aug 7, 2015 at 19:40

rplantiko

2,7681 gold badge25 silver badges24 bronze badges

3 Comments

Kyle Over a year ago

Thank you! What is the purpose of adding the || {} then?

rplantiko Over a year ago

As you expected, you can use the idiom a = b || c for the intention "assign b to a, but only if b doesn't evaluate to false (or null or "" or 0 or...). If it does evaluate to false, the logical or is forced to evaluate c, and then c will be the result of the evaluation of the right-hand side. If b was not false, b will be the result of the rhs. But in your case, you can't use this idiom, because for an evaluation of an expression, all symbols must be known (except as argument of the typeof operator, hence my proposal above).

Kyle Over a year ago

Thanks a ton! I really appreciate all the help.

Collectives™ on Stack Overflow

Javascript Module Pattern Uncaught Reference Error

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related