jquery - scope inside $(document).ready()?

Question

So to stay organized, I have several javascript files, even though they all (in the end) are minified together to form one final javascript file.

Each file\'s conten

Answer 1

Javascript uses functional scopes, so local variables inside a function are not visible to the outside. This is why your code can't access code from other scopes.

The ideal solution to this is create a Namespace.

var NS = {};

(function(){
  function privateFunction() { ... }
  NS.publicFunction = function(){ ... }
})();

$(document).ready(function(){
  NS.publicFunction();
});

This is also a useful pattern because it allows you to make a distinction between private & public elements.

Answer 2

It is a scope issue. For example:

function a() {
   var myHiddenStr = 'abc';
}
alert(typeof(myHiddenStr));

You cannot access myHiddenStr outside of function a. In similar fashion, the anonymous function you use for document ready hides everything within it.

Having a global scope where you put things from different js files is not a good idea. It's probably better to have one document.ready handler and call respective functions from within it. You can then get the results out of the functions and pass them to other functions that need to use these.