0

I need help conceptually understanding how the "#" are being added on each row. When this code is run you get a width of 5 #'s, and a length of 10 #'s. How does it know to give me the width of 5 and the length of 10?

Here is my code: 

var board = "";
var size = 10;
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);
Lang
  • 11
  • 1
    It creates a 10x10 board, space is a white square, # is a black square. Trace through code a few times to follow the pattern. (y, x): (0,0), (0, 1), (0, 2) .... (0, 9) (1, 0), (1, 1) .... (9, 9) – Evan Trimboli Apr 28 '16 at 22:35
  • also, importantly it's using modulo to flip flop the space and # sign. See http://stackoverflow.com/questions/2664301/how-does-modulus-divison-work – Radio Apr 28 '16 at 22:35
  • The loop icrementing `y` is creating the rows (10 rows, as set in the `size` variable), and the loop inside it (incrementing `x`) is creating 10 cells inside each row. This loop will add alternating `#` and spaces, by using `%2` (modulo 2), which is used to determine whether a value is odd or even. For example, `3 % 2 = 1` (the remainder), which means `3` is odd, and `4 % 2 = 0`, which means `4` is even. – blex Apr 28 '16 at 22:37

3 Answers3

1

So it is all to do with the modulus operator here combined with some simple math addition properties.

First some rules:

1) When we add an odd number with another odd number you will get an even number.

2) When an even is added to an even, we get an even number

3) When an odd and even are added, you will get an odd number.

Now lets start on row 0 (the first row in the array).

By adding x + y, on the first row x would be 0 (the array index). Thus 0 + an odd number will always be odd, and 0 plus an even is always even. When we then use mod 2 with this sum, for every value of y that is odd, it will have a remainder, and if it is even, it will be 0 remainder because 2 will always divide into an even number perfectly. So the pattern produces " # # # # #"

In the 2nd row, which is row 1 in the array index, the index is odd, so using the rules above, an odd plus even is odd, odd plus odd is even etc. So when we mod 2 the result it is the exact opposite resulting in "# # # # # "

This then repeats for each odd and even row respectively to produce the chess board pattern you see in the console.

Jason Mayes
  • 301
  • 2
  • 8
0

It gives you a 10 x 10 matrix. You can see it better if you replaces in line 6 with another char, like -.

If you want a better explanation for the code we can begin with the loops. The yis the row index and the x the column index, so that, in the first iteration, you are on (0,0), so you are in the first position.

In the next step, you will be in the (0,1), then (0,2) and so, until you arrives to (0,size). In this case, next step will be (1,0), and repeat again the process. This means that you change from the row 0 to row 1.

In this point you know how to move along the table. So, you only have to learn to decide if you have to put a " " or a "#". This is why the module operator is used(%).

You can have a look on Google about how %works. For your example, it is enough knowing that number % 2 will be always 0 or 1 depending on if the number is even or odd.

Suming up, this code is checking for each one of the cells in the table if they are even or odd, and puting a # or a depending on the case.

Iván Rodríguez Torres
  • 4,293
  • 3
  • 31
  • 47
0

The modulus operator returns the remainder so % of 2 is going to is alway going to be 1 or 0. When it is 0 it prints " " and "#" for 1 thus alternating your squares for your chess board.

Brian Greig
  • 31
  • 6