Console access to Javascript variables local to the $(document).ready function

Question

How can I access some variables inside

$(document).ready(function(){
    var foo=0;
    var bar = 3;
});

from Google chrome console? If I try alert(foo), I will get a message that it is not defined.

Answer 1

Put a breakpoint with the debugger. You'll get full access to them when the debugger will stop.

Other answers telling you to put them in the global scope are bad. Don't use bad practices just because you don't know how to use the right tools.

Answer 2

You can't access these variables because they are defined within a functional closure. The only way you could do it is if you made a global reference to them outside your function's scope.

var foo, bar;

$(document).ready(function(){
    foo = 0;
    bar = 3;
});

Answer 3

Why not do a proper expose variable ?

$(document).ready(function(){
    var foo=0;
    var bar = 3;

    $.exposed = {
        foo: foo,
        bar: bar
    }
});

Check your variables by doing

console.log($.exposed.bar)

Answer 4

You can't since the are in a closure space. Here it explains how closure works ( How do JavaScript closures work? ). To access the varible just set a breakpoint inside the $(document).ready function

Answer 5

If you really need to access these variables from different parts of your code (initialize them on document ready, then accessing them elsewhere, for example), then you have to declare them outside the function closure.

If and only if this is the case, I'm not a fan of cluttering the global space. I would suggest you to use a base object for that :

var myObj = {};

$(function() {
   myObj.foo = 0;
   myObj.bar = 3;
});

Note that they will only be set once the document is loaded! Therefore alert(myObj.foo); (or something similar) place immediately after the $(function() { ... }); block will yield undefined !

If you only need to access them inside that context, then do not declare anything outside the function. And try to debug your code with other methods. With chrome, console.log is quite helpful, for instance.

Answer 6

$(document).ready(function(){
    window.foo=0;
    window.bar = 3;
});

You expose those vars into global scope(really not advised)

Answer 7

define them outside of $(document).ready() and then access them inside as well.

var foo = 0, bar = 3;
$(document).ready(function(){
    alert(foo);
});

Answer 8

Actually there is a hackish way around it. You should probably not use it. Set a Breakpoint. That being said, here's the code:

$(document).ready(
    readyClosure = function(access){
        var x = 5; 
        return eval(access);
    }
);
readyClosure('x'); // returns 5