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.

Answer 1

“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