# Eloquent JavaScript, Chapter 2 - Chessboard puzzle

Hi,

I have been trying the last few days trying to figure the Chessboard puzzle on this part of the course - links provided below.

Link to the Chapter directly (Chessboard puzzle at very bottom of page):
https://eloquentjavascript.net/02_program_structure.html#p_rCF2gb77FE

I feel unable to complete this - it seems so complex. The last working code I have written trying to solve this is below

let size = 8
let string = ββ;

for (counter = 1; counter <= ((size*size)+(size-1)); counter++) {
if (counter % (size + 1) === 0) {
string += β\nβ;
} else if (counter % 2 === 0) {
string += β#β;
} else if (counter % 2 === 1) {
string += β ';
}
}

My above code is flawed as it is unable to deal with presenting a chessboard with odd numbered width/length correctly.

The code provided as a solution in this chapter, I have copied below:

let size = 8;

let board = ββ;

for (let y = 0; y < size; y++) {
for (let x = 0; x < size; x++) {
if ((x + y) % 2 == 0) {
board += " ";
} else {
board += β#β;
}
}
board += β\nβ;
}

console.log(board);

console.log(string);

The problems is, I canβt grasp what the solution means or how it solves the problem - all I know is that it does work, but I donβt understand the code.
I donβt understand how in the provided solution, the relationship of x and y being added together effect how the string is built using the spaces, hashβs and line breaks.

I beg for some help - can someone please break this down?

Thanks,

To preserve code formatting in forum posts, see: [How to] Format code in posts

The chapter you linked to specifies:

Write a program that creates a string that represents an `8Γ8` grid, using newline characters to separate lines. At each position of the grid there is either a space or a `"#"` character. The characters should form a chessboard.

The solution code you want to understand (with proper formatting) is:

``````let size = 8;

let board = "";

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

console.log(board);
``````

The goal is to create a string consisting of `" "`, `"#"`, `"\n"` where `" "` represents a white square, `"#"` represents a black square and `"\n"` represents a new line (or new row). A string representation of the following board is required:

In the picture, `y` refers to the rows and `x` refers to the columns. In JavaScript, strings/arrays use zero-based indexing i.e. the first character/element is at index 0, the next at index 1 and so on. Hence, the decision to label the rows/columns as `0-7` instead of `1-8`.

If we want to create grids of sizes other than 8 as well, but with a similar pattern, then we need to first recognize the underlying pattern so that we can write code following some logic to re-create the pattern.

Notice the pattern of the squares.

• Row 0, Column 0 is white. Row 0, Column 1 is black. Row 0, Column 2 is white β¦ Row 1, Column 0 is black, Row 1, Column 1 is white.

• When (both row AND column are even) OR (both row AND column are odd), then the square is white.

• When (the row is even AND column is odd) OR (row is odd AND column is even), then the square is black.

We could capture this logic in if statements making use of modulus (`%`) and logical operators such as AND (`&&`) and OR (`||`), but we can avoid long convoluted expressions by thinking a bit more. A little bit of mathematical insight tells us that:

• The sum of two even numbers is even.
• The sum of two odd numbers is even.
• The sum of an odd and an even number is odd.

We can check whether the row is odd/even and whether the column is odd/even and then chain logical operators together to write long expressions to decide whether the square is white or black.

Instead if we sum the row and column numbers together and then check whether this sum is odd or even, it will help us decide whether the square is white or black. If the sum `(x+y)` is even, then the square is white. If the sum `(x+y)` is odd, then the square is black.

The solution code works like this:

• An iteration of the outer loop ββ`for (let y = 0; y < size; y++)` ββ begins. In the first iteration, `y` will be `0` and we will traverse this row.

• The inner loop ββ`for (let x = 0; x < size; x++)` ββ begins. This will traverse the columns in Row 0.

• Even numbers are perfectly divisible by `2` i.e. no remainder (zero remainder). Odd numbers arenβt perfectly divisible by `2` i.e. dividing an odd number by `2` results in a remainder of 1. The condition `if ((x + y) % 2 == 0) ` checks whether this sum is even. If so, the square is white and a blank space `" "` is added to the `board` string. If the sum is odd, then the square is black and `"#"` is added to the `board` string.

• The inner loop will iterate over all the columns in the row. If `size` is `8`, then `x` will iterate from `0` to `7`. The inner loop ββ`for (let x = 0; x < size; x++)` ββ will then finish. Since we have completed processing Row 0, so `board += "\n"` will add a newline character to the `board` string.

• Now, the next iteration of the outer loop ββ`for (let y = 0; y < size; y++)` ββ begins. Now, `y` will be `1` and we will traverse this row.

• The same process as above repeats. The inner loop will iterate (from `0` to `7` if size is `8`) through the columns. Once the inner loop finished, Row 1 will be complete and `"\n"` will be added.

• The outer loop ββ`for (let y = 0; y < size; y++)` ββ will iterate one by one through all the rows till the board is complete.

1 Like