Using var to declare variables in Javascript

Question

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"?

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
– user113716, Commented Oct 21, 2011 at 16:38

hvgotcodes · Accepted Answer · 2011-10-21 16:31:53Z

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.

answered Oct 21, 2011 at 16:31

hvgotcodes

121k33 gold badges209 silver badges237 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Dinescu · Accepted Answer · 2011-10-21 16:38:57Z

5

When you don't use var to set the scope of the variable, it automatically becomes 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!

edited Oct 21, 2011 at 16:38

answered Oct 21, 2011 at 16:32

Mike Dinescu

56k17 gold badges124 silver badges153 bronze badges

1 Comment

Mike Dinescu Over a year ago

@pruett, just to avoid any confusion, Firebug is only available for Firefox. But since it's a very powerful debugger it might be worth your while to use FF as your debugging browser..

Collectives™ on Stack Overflow

Using var to declare variables in Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related