Global and local variables in my script

Question

I'm just starting out learning javascript, and tried to write a little script that would make a grid of divs on a page.

Here's the script:

var tileWidth=50;
var tileHeight=100;
var leftPos=10;
var topPos=10;
var columns=10;
var rows=10;
var spacing=5;

$('document').ready(function() {
 placeTiles();
});

function makeRow() {
 for (var i=0; i<columns; i++) {
   $('#canvas').append('<div class="tile" style="left:' + leftPos + 'px;top:' + topPos + 'px;"></div>');
   var leftPos = leftPos + tileWidth + spacing;
 }
}

function placeTiles() {
 for (var i=0; i<rows; i++) {
  makeRow();
  var topPos = topPos + tileHeight + spacing;
 }
}

At the moment, 100 <div>s get created, all with a top position of 10px and a left position of undefined (for the first <div> in the row) or NaN.

What should I be doing differently? Why can't makerow() see my global leftPos variable (and all the other variables for that matter)?

Thanks.

dont use var in front of leftPos, because you have declared left post at the top of your script — Senad Meškin
– Senad Meškin, Commented Apr 24, 2010 at 22:55
leftPos sorry, in your foreach remove var from "var leftPos" — Senad Meškin
– Senad Meškin, Commented Apr 24, 2010 at 22:55

score 3 · Accepted Answer · 2010-04-24 23:07:02Z

3

"Why can't makerow() see my global leftPos variable (and all the other variables for that matter)?"

Because var is not a declaration. It is a function(scope)-wide annotation. In the top-level scope var essentially does nothing (the global execution context/scope is the window object) so it is the same as window.leftPos = 10 or just leftPos = 10. In the makeRow you essentially have:

function makeRow() {
 var leftPos = undefined // this is "hoisted" to the TOP of the function
 for (...) {
  // ...
  leftPos = leftPos + tileWidth + spacing
 }
}

Something look suspicious? :-)

Two solutions to this are 1) use a different variable name (recommended) 2) use the 'global' leftPos a property of the window object (as shown below).

Also, even though it is just a scope-wide annotation, it generally leads to more clear code if you keep the 'var's at the top (it is "hoisted" anyway, see above). Eg:

function makeRow() {
 var leftPos = window.leftPos // or use a different name, which is what I'd do
 for (var i=0; i<columns; i++) {
   $('#canvas').append('<div class="tile" style="left:' + leftPos + 'px;top:' + topPos + 'px;"></div>')
   leftPos = leftPos + tileWidth + spacing
 }
}

For more information, see: Identifier Resolution, Execution Contexts and Scope Chains

edited Apr 24, 2010 at 23:07

answered Apr 24, 2010 at 23:00

user166390

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

3 Comments

Acorn Over a year ago

Oh I think I see! When I do var leftPos = leftPos + tileWidth + spacing, I'm declaring a local variable leftPos, which overrides the global variable with the same name (actually what I wanted), but then when I try to assign the global variable to it, it has already been overwritten! So I can either refer to the global variable with the alternative method of window.leftPos, or give the global variable a different name. Thanks!

Daniel Vassallo Over a year ago

@Acorn: Overwritten may not be the right term. The global variable would still exist, but since you had another local variable with the same name, the global one would not be accessible, unless you use window.leftPost.

wombleton Over a year ago

Shadowed is the term I believe.

cobbal · Accepted Answer · 2010-04-24 22:53:30Z

1

you declare leftPos to be of function scope with var leftPos, hiding the global declaration. If you're not declaring something don't use var

answered Apr 24, 2010 at 22:53

cobbal

70.9k20 gold badges146 silver badges159 bronze badges

1 Comment

Acorn Over a year ago

But I'd already declared leftPos as a gloval var at the beginning of the script. I thought that I could then assign a local var with the same name within the function so that it would take the global var, add the other variables to it, and then overwrite it, so that all the other loops in the function would use the local var instead of the global. Then the next time the function was called it would reset back to the global var. So I can't do that?

Daniel Vassallo · Accepted Answer · 2010-04-24 23:09:51Z

In JavaScript you can have function scope or global scope for your variables.

If you have two variables of the same name in different scopes, the first preference is given the variable declared in the function scope.

Therefore you have your leftPos and topPos variables declared in global scope at the top of the script, and you also have them declared within the makeRow() and placeTiles() functions. The var keyword is used for variable declaration, not for variable assignment.

You simply need to remove the variable declaration with var from within the functions, in order to use the global variables. Simply use:

leftPos = leftPos + tileWidth + spacing;

// and

topPos = topPos + tileHeight + spacing;

However, you should consider avoiding global variables altogether. Globals are evil.

Collectives™ on Stack Overflow

Global and local variables in my script

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related