I'm struggling with (what I believe to be) a scoping issue. Here's a sample of my code:

$(document).ready(function() {

var counter = 0;

function scrollTweets() {
    counter ++;
    // rest of code
}

...

)}; // end of document ready

When I look up the variable counter in Chrome's Javascript console it returns "ReferencedError". However, when I remove var from the code above and type counter into the console, it returns the value. Why is this?

I think understanding this simple concept would allow me to tackle issues that seem to pop up during development. Is it just a scoping issue on Chrome's part? Am I needlessly wrapping everything in the $(document).ready "function"?

I'm struggling with (what I believe to be) a scoping issue. Here's a sample of my code:

$(document).ready(function() {

var counter = 0;

function scrollTweets() {
    counter ++;
    // rest of code
}

...

)}; // end of document ready

When I look up the variable counter in Chrome's Javascript console it returns "ReferencedError". However, when I remove var from the code above and type counter into the console, it returns the value. Why is this?

I think understanding this simple concept would allow me to tackle issues that seem to pop up during development. Is it just a scoping issue on Chrome's part? Am I needlessly wrapping everything in the $(document).ready "function"?

• javascript
• jquery
• scope

Share Improve this question Follow asked Oct 21, 2011 at 16:30 pruettpruett 2,12133 gold badges2222 silver badges3737 bronze badges 2

• 2 Don't make it global! If you want to inspect counter, then set a breakpoint in the code. This will allow you to examine the current state of the variables in the various levels of closure. Or just log the value using console.log(). – user113716 Commented Oct 21, 2011 at 16:38
• thanks @Ӫ_._Ӫ ...that's a good technique! – pruett Commented Oct 21, 2011 at 18:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The var locks the variable counter into whatever the lexical scope is -- which means its available in the current block, method, whatever, and can be attached to closed-in scopes (ie. closures), like you are doing with scrollTweets. So counter is only available in the ready callback and anything that has a closure around it, which is why you can't access it from your console.

When you take the var away, counter is effectively global, which is why you can access it in that case.

When you don't use var to set the scope of the variable, it automatically bees a global variable, inside the global scope. That's why it is visible in the Chrome console.

As a note, I'm by no means implying you should make the variable global. In fact that's almost always a bad idea! Capturing the variable in the context of the scope where it's used is the right thing to do. If the Chrome console can't handle that you just need a better debugger. Firebug for Javascript does a wonderful job at handling scope - even clojures!