What is the difference between having a function in Jquery.Document and not having it in.

Question

Hi

I am just wondering what is the difference between these two

File1.js
$(function()
{
   function MyFunction()
   {
         // some code here
   }
});

File2.js

$(function()
{
      // call it.
      MyFunction();
});

---

File1.js
function MyFunction()
{
        // some code here
}


File2.js

$(function()
{
      // call it.
      MyFunction();
});

So what is the difference? When I did the first way and I tried to call MyFunction() from File2.js it never worked. I moved my function out of the Jquery.Document ready in File1.Js and it worked.

I have some other functions that are in File1 and even though they are in document ready anything in File1 can seem to call it no problem.

It just seems like across script files it has a problem calling functions when setup that way.

Answer 1

In ECMAScript there is only function ( no block scope ) scope, and anything defined within a function with 'var' or the 'function' keyword will not be accessible outside of the scope ( unless you assign it to something from an outer scope like window ). You defined a function in another function and according to function scope rules you cannot access it.

However, you can access variables/functions defined on the outer scope, which is what you did on the second example.

So in essence what you are doing when you are $(function(){})'ing is creating a sandbox, a restricted area where if you define any variables you cannot access them unless you specifically assign them to be properties of something like the window object, which is the global namespace.

Answer 2

I believe this issue is caused because the extra "$();" wrapping the function creates a sort of closure, resulting in a limited scope.