Question

// first.js
$(document).ready(function() {
   var MyNamespace = {};
});

// second.js
$(document).ready(function() {
   console.log(MyNamespace);
});

Running this script I’m getting error Uncaught ReferenceError: MyNamespace is not defined. I suppose, I’m getting this error because definition of MyNamespace and MyNamespace calling are in different scopes. How do I solve this problem?

I need to create namespace inside $(document).ready() wrapper because functions in this namespace will use jQuery methods etc.

What is the best practice?

Thank you!

Answer 1

There are two things you need to change:

1. Put the MyNamespace in a global scope;
2. Avoid redefining MyNamespace in each file;

You put var MyNamespace = MyNamespace || {}; in front of both your js files. It decalres MyNamespace as an object if it isn’t defined before.

// first.js
var MyNamespace = MyNamespace || {};
$(document).ready(function() {
   console.log(MyNamespace);
});

// second.js
var MyNamespace = MyNamespace || {};
$(document).ready(function() {
   console.log(MyNamespace);
});