How do external JS actually loaded into html?

Question

I don't know am I doing right or wrong, my understanding is not quite clear. I am always making many external js files, and put them all in the header. All my external js files begin the same way like this:

$(document).ready(function(){
  //all the functions and variables
});

For example, if I have 3 external js files:

1.

$(document).ready(function(){
  var a = 1000;
  function run(){alert(a)};
  $('#btna').click(function(){run();});
});

2.

$(document).ready(function(){
  var b = 2000;
  function run(){alert(b)};
  $('#btnb').click(function(){run();});
});

3.

I never tried to use variables and functions that are in other JS files. Is it possible to get the a and b variable in the third JS file?

$(document).ready(function(){
  //is it possiblr to do this?
  alert(a+b);
  //or if I use run(), which methods will be called?
  run();
});

I am so confused... How does external JS actually load into html? Or I shouldn't put document ready in all files? Now I want to load scripts one by one after one is completely loaded, not having a bunch of things load at the same time. Therefore I have to make it clear first.

Answer 1

Do NOT start putting variables in global scope. While this is sometimes necessary, you are much better off sharing modules between different scopes using something like http://requirejs.org. By using modules and objects, you limit the scope of the variable and reduce the chance of errors due to conflicts between variables defined in different files with the same scope. RequireJS also gives you a way to manage your dependencies, asynchronously load javascript files, and provides a clean way to optimize your scripts if desired.

From a learning perspective, as others have noted, the difficulties you are observing are due to the scope of the variables being local to the anonymous functions run on document ready. In JavaScript variables defined with var have scope local to the containing block of code. If you don't define the variable using var then it is scoped globally. Using global scope should be avoided to reduce the chance of accidental reuse of a variable in multiple locations. A good rule of thumb is to limit scope as much as possible, defining it local to where it is used. If a variable must be shared globally, you should probably define it as a property of an object and share the object globally. While the object is shared globally, the object context functions as the scope of the variable (like a namespace) making it less likely that if you will accidentally reuse it somewhere else for a different purpose.

For example:

<script type="text/javascript">
     var globalConstants = {
          a = 5,
          b = 10
     };
</script>

Then you can later refer to globalConstants.a or globalConstants.b - this makes it less likely that you would accidentally repeat the use of a or b in separate scripts without knowing that they are, in fact, the same variables.