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

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.

Answers:

Answer

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

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

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

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

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
$(document).ready(function(){
    window.foo=0;
    window.bar = 3;
});

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

Answer

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.