为什么这些雄辩的Javas Chessboard解决方案之一比另一个更好

Question

I took on the Chessboard puzzle from the book Eloquent Javascript and devised the following solution without looking at hints

var newline = "\n";
var counter = .5;
var string1 = " # # # #";
var string2 = "# # # # ";
while (counter <= 3.5){
  console.log(string1 + newline);
  console.log(string2 + newline);
  counter++
}

I originally had too many lines written out so simply changed my counter to 'half steps'. Looking up how others accomplished this, I found this solution.

    var size = 8;
for (var i = 0; i < size; i++) {
  var line = "";
  for (var j = 0; j < size; j++) {
    var total = i + j;
    if (total % 2 == 0) { 
      line += '#';
    } else {
      line += ' ';
    }
  }
  console.log(line);
}

Can you explain why one version may be better than the other? Also, a plain-english explanation of the second would be helpful. I talked myself into a headache trying to comment it plainly.

Answer 1

Plain english explanation of second one - the var size = 8 will be the size of the board. The first for loop declares the var line and eventually logs it to console. It will log to console for every line, or row, if you prefer.

The second for loop will actually build the line, or row, adding to var line for each column in the row. Instead of having to declare two strings like you did in the first version, it knows how each row should end up looking based on some variables and a rule. The rule is if total is divisible by 2, then add a "#", and if not, then add a " ". total is calculated by adding i and j .

So in the first row i is always 0, and j will be 0, then 1, then 2, etc...so total be divisible by 2, then not divisible by 2, then divisible by 2, etc...then in the second row i will be equal to 1, and j again will be 0, then 1, then 2, etc..so now total will first not de divisible by 2, then divisible by 2, then not, etc...for the third row, i will be 2, which will basically act as i being 0 since both 0 and 2 leave no remainder when divided by 2. This is how the second for loop accomplishes the same thing as your string1 and string2 . I'm sorry this is a bit wordy, hope it makes sense...I'll put some comments in the actual code below.

// sets size of board, since the first loop will run for this amount of
// times, and log a row to console each time, and the second loop will add   
// this many characters to the string to be logged.
var size = 8;

// first loop, which will run a number of times equal to the size
// variable, and log a row to console each time
for (var i = 0; i < size; i++) {

  // declares the string to be logged as the row
  var line = "";

  // this loop will run a number of times equal to the size
  // variable, and add a character to the line variable each time,
  // either a "#" or a " "
  for (var j = 0; j < size; j++) {

    // the total variable will be used to determine if the character added
    // to the line is a "#" or a " "
    // basically, any time i is 0 or divisible by 2, the row will
    // begin with a "#" and alternate from there as j changes, 
    // if i is not divisible by 2, the row will begin with a " " 
    // and alternate from there
    var total = i + j;

    // this if else statement actually uses total to added either "#" or " "
    if (total % 2 == 0) { 
      line += '#';
    } else {
      line += ' ';
    }
  }

  // this is outside of the second loop, and now the line variable is done
  // being added to, and the line is logged
  console.log(line);
}