javascript creating grid with string

Question

I'm new to all of this and working through Eloquent JS. My goal here is a string that creates a chess board/grid of a given size, with spaces that consist of alternating hashes and blanks. I don't quite understand

1.) the correct solution to my problem

2.) what's happening when I make certain changes to the code

This seems like it should be the correct answer but the first line in the console isn't aligned properly because of the comma:

function chessBoard (size) {
result = "";
for (var i = 1; i <= size; i++) {
  for (var j = 1; j <= size; j++) {
    if ((i + j) % 2 == 0 ) {
      result = result + "#";        
  } else {
    result = result + " ";
    }

 }

result = result + "\n"
}
console.log(result);
}  

chessBoard(8);

"# # # # 
 # # # #
# # # # 
 # # # #
# # # # 
 # # # #
# # # # 
 # # # #
"

If I change all 3 result statements inside the loops so the hash, space, and newline get placed on the other side of the + operator (result = "#" + result), the function produces:

"
# # # # 
 # # # #
# # # # 
 # # # #
# # # # 
 # # # #
# # # # 
 # # # #"

That looks correct, but is it? Why does the first line start with a hash? If the inner loop is checking to see if (i + j) is even--last character is (1+8) right?--and then using

result = " " + result;

to add the last character to the string, why isn't that character at the beginning of the string?

Lastly, if I use the result = result += order for the statements in the inner loops, but result = "\n" + result in the outer loop, I get this:

"







# # # #  # # # ## # # #  # # # ## # # #  # # # ## # # #  # # # #"

What is happening here? Thanks so much for the help.

Answer 1

1)

function chessboard(size){
    var i=0, _size=size*size, output='';
    for(;i<_size; i++){ 
        // add a new line if we need two
        if (i % size === 0)
               output= output +'\n' ;

        // determine whether we need a hash or a space
        output = output + (i%2 ? '#': ' ');     
    }
    // append a new line at the end for proper formatting.
    return output + '\n'
}

2) As you said the first line isn't aligned correctly because of the quote, so you need to add a new line character to the beginning.

in the second set what you're doing is prepending to the string essentially building it backwards. after each execution instead of adding the # or ' ' at the end of the string you're putting it at the beginning. At the end you prepend the newline character to the beginning of the string which makes it start on a new line.

Answer 2

I'm going to try to explain how the code in the solution works.

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);

So you have a loop in a loop here. The first/outer loop controls the line break and the inner one controls whether a # or a ' '(space) gets printed (aka added to the board variable).

Basically, what helps me is to imagine the inner loop going wild and adding spaces and # while the outer loop only really 'does' something (line break) every 8 times (or whatever the size variable).

So the inner loop runs and adds characters. Meanwhile, the outer loop just increases the y size. Every so often, it adds a new line to the board.

I'm working on visualizing for loops so that I can understand them better.

Answer 3

Why does the first line start with a hash?

In the inner loop:

(i + j) % 2 == 0 ) 
   result = result + "#";      

on the first run, i is 1 and j is 1, so 1+1 = 2 and it happens that 2%2==0 so the condition is true and therefore you are going to get a # at the beginning.

Answer 4

I did some corrections using the Nimnam's solution to achieve the exactly second example pattern (I added some extra comments in the code too):

function chessboard(size){
    // You have to multiply the (grid*1) * grid because the '\n' character. 
    // i.e If you have a 8 grid would need 72 grids (64 + 8 = 72) because each 
    // line would need a /n character, totaling 9 grids for each line.

    var i=0, _size=(size+1)*size, output='';
    for(;i<_size; i++){ 
        // add a new line if we need two
        // now we have to add +1 to the size because the 9º character;
        if (i % (size + 1) === 0)
           output= output +'\n' ;

        // determine whether we need a hash or a space
        // I inverted the character order to achieve the correct pattern
        output = output + (i%2 ? ' ': '#');     
    }
    // append a new line at the end for proper formatting.
    return output + '\n'
}

I hope it helps :)