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.
