CODEWITHSUNDEEP
javascriptfor-loop
MarineBiologist
MarineBiologist

Reputation: 55

How this for loop makes a 8x8 board?

var size = 8;

var board = "";

for (var y = 0; y < size; y++) {
  for (var x = 0; x < size; x++) {
    if ((x + y) % 2 == 0)
      board += " ";
    else
      board += "#";
  }
  board += "\n";
}

console.log(board);

Now I understand that this creates a 8x8 board. I have problem in understanding how and what does 2nd "for" loop do (I want to understand its behavior). As far as I understand, these 2 loops create a 2D coordinate system with 1st for loop covering y-axis and 2nd covering x-axis. I understand how the following block works.

{
 if ((x + y) % 2 == 0)
    board += " ";
 else
    board += "#";
}

I don't understand how the second for loop covers x-axis. I started reading eloquent javascript and this question was given as an exercise. It gave a short info about nested loops but not to this complexity. I searched previous answers but didn't get information about this. Any help?

Upvotes: 2

Views: 202

Answers (3)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

"Watching" the variables change may give you a better feeling for how the program works:

var prog= [],
    table= document.querySelector('table'),
    sx= document.getElementById('x'),
    sy= document.getElementById('y'),
    smod= document.getElementById('mod');

function display(x, y, c) {
  prog.push([x,y,c]);
}

function runProgram() {
  var p= prog.shift();
  if(p) {
    var x= p[0], y= p[1], c= p[2], mod= (x+y) % 2;
    sx.innerHTML= x;
    sy.innerHTML= y;
    smod.innerHTML= mod;
    table.rows[y].cells[x].innerHTML= c;
    setTimeout(runProgram, 200);
  }
}

var size = 8;

var board = "";

for (var y = 0; y < size; y++) {
  for (var x = 0; x < size; x++) {
    if ((x + y) % 2 == 0) {
      board += " ";
      display(x, y, ' ');
    }
    else {
      board += "#";
      display(x, y, '#');
    }
  }
  board += "\n";
}
console.log(board);

runProgram();
th {
  height: 20px;
  width: 20px;
  border: 1px solid gray;
}
y= <span id="y"></span><br>
x= <span id="x"></span><br>
(x+y) % 2 = <span id="mod"></span>
<table>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
</table>

Upvotes: 2

jdphenix
jdphenix

Reputation: 15415

Consider this truth table, which shows the even/odd result of adding two integers: 

|  X is even  |  Y is even  | X + Y is even | Write a space?
|     F       |      F      |      T        |      T 
|     T       |      F      |      F        |      F
|     F       |      T      |      F        |      F
|     T       |      T      |      T        |      T

So starting at position (0, 0), the inner loop would write a space. Consider then next row, (0, 1) - the inner loop would write a number sign, because the result of 1 + 0 is odd. The pattern continues for the entire board, regardless of the current row or column.

Consequently you can also tell whether any square on an arbitrary board would be empty or have a number sign.

Upvotes: 1

James Taylor
James Taylor

Reputation: 6258

Basic programming knowledge tells us that a for loop is simply a means of adjusting the value of a variable a certain number of times. In your case, you are basically "counting" starting at zero and incrementing y until it is greater than size.

So the second, "nested" for loop basically takes this very simple concept and expands on it. So for every yth iteration of the outer loop x will start at 0 and go to size-1.

Consider this modified code sample:

for (var y = 0; y < size; y++) {
    for (var x = 0; x < size; x++) {
        board += " " + (size * y + x);
    }
    board += "\n";
}

Produces this output:

0 1 2 3 4 5 6 7
8 9 10 11 12 13 14 15
16 17 18 19 20 21 22 23
24 25 26 27 28 29 30 31
32 33 34 35 36 37 38 39
40 41 42 43 44 45 46 47
48 49 50 51 52 53 54 55
56 57 58 59 60 61 62 63

In this way, the variables x and y seem to be appropriately named. For every row y, x will have gone from 0 to size-1.

Hope this makes sense!

Upvotes: 1

Related Questions