can't access variables in another javascript file

Question

So i have link every file needed into the index.html file :

    <script src="jquery.js"></script>
    <script src="notify.js"></script>
    <script src="script.js"></script>

i create an object in 'notify.js' :

    var notify = {
    newNotification : function(text) {
    }
}

script.js :

alert(notify.newNotification);

When i try to access the 'notify' object in 'script.js', it works just fine.But i want to use jquery so i add $(document).ready() to both of the file like this:

notify.js

    $(document).ready (
    function() {
var notify = {
    newNotification : function(text) {
    }
}
}
)

Script.js:

    $(document).ready (
    function() {
alert(notify.newNotification);
    }
)

And after i add that, it comes up with notify is not defined.What's wrong? Can anyone explain why it doesn't work?

Answer 1

As you have defined var notify in notify.js inside $(document).ready( which is an anonymous function and var notify scope is limited to this function only .

So it is not accessible outside the $(document).ready( function

To make accessible outside don't wrap it in $(document).ready( function

like this:-

var notify;
$(document).ready(function () {
    notify = {
        newNotification: function (text) { }
    }
});

Answer 2

Like everyone else here already pointed out: Only use $().ready when you're handling DOM-Elements and your Variable is not accessible because you used the var keyword (like you're supposed to). The var keyword limits the defined variables to the current scope, which is the scope of the anonymous function you use as your DOM-Ready-Handler.

So, removing the unnecessary $().read will temporary solve your problem.

BUT(!) you should wrap your code into a closures to avoid messing up the global scope and to avoid possible naming conflicts with 3rd-party code.

Like that:

notify.js

;(function ($, window, undefined) {
  var notify = {
    newNotification : function(text) {
      return text;
    }
  };
})(jQuery, this);

script.js

;(function ($, window, undefined) {
  alert(notify.newNotification());
})(jQuery, this);

So, now you'll have the same problem as before, you don't have access to your Object.

Sure you could just add your notify Object to the global scope as Arun P Johny suggested in his answer, but i'm pretty sure over the time there will be more Object you'll need to make global accessible. If you put each of them in the global scope, you start messing up the global scope again, so my recommendation would be ONE global Object that will hold all other objects/variables you need globally accessible. (Or even better use something like requirejs

Somethink like this:

main.js

;var MyApp = {}; # Only variable in global scope

# Maybe some more initalization code here, dunno

notify.js

;(function ($, window, undefined) {
  MyApp.notify = {
    newNotification : function(text) {
      return text;
    }
  };
})(jQuery, this);

script.js

;(function ($, window, undefined) {
  alert(MyApp.notify.newNotification());
})(jQuery, this);

Some interesting Q/A's about scope and closures here on stackoverflow:

• What is the scope of variables in JavaScript?
• How do JavaScript closures work?
• JavaScript closures vs. anonymous functions

A good Answer about messing around with the global scope:

• What is meant by “leaking” into global scope?

Answer 3

In this case there is no need to wrap the notification object in dom ready... because from the looks of it you are not creating any dom element reference while creating the object... the only thing that matters is any method invokation that deals with dom element has to be done on dom ready.

var notify = {
    newNotification: function (text) {}
}

$(document).ready(function () {
    notify.newNotification()
})

if you declare the variable inside a dom ready handler then it becomes a local variable to the dom ready handler... so it will not be accessible outside the dom ready handler...

Another solution is to add the variable to the global scope within the dom ready handle like

var notify;
$(document).ready(function () {
    notify = {
        newNotification: function (text) {}
    }
})

or

$(document).ready(function () {
    window.notify = {
        newNotification: function (text) {}
    }
})

Answer 4

You only need one document.ready And this only declare the variables that will move freely in their scripts.

See the example:

script.js:

$(document).ready(function(){
   // declare the variables as global
   $.varA, $.varB, $.varC;
});

notify.js:

function doNotify(){
   // your code here
   $.varA = /*your code here */
}

function otherFunc(txt){
   // your code here
   $.varB = txt;
}

Answer 5

All of your JavaScripts will load before the document is ready.

Create a separate function in script.js that references the notify object, then call that function from $(document).ready

Answer 6

Try this.

var notify = {
    newNotification : function(text) {
    }