Understanding the code in steps

The following code creates a grid of 8×8. Can anyone please help me understand the code in steps as they work so as to understand what is going on. Thank you in advance.

Link to codepen

Rather than have someone spend 10 minutes typing up a line by line explanation of every single line, why don’t you ask about what you don’t understand? Or write up your own explanation and we can tell you what you’re getting wrong?

Or better yet, first spend some time putting in console.log statements and trace through the code to get an understanding what is going on. This is an EXTREMELY important skill for any developer.

1 Like

Hi Javed. I think if you trace the code with the numbers you can find how it is working. but to be more clear, for the first 8 numbers both conditions are not true, so it pushes them to row array and after that, the condition is true and add the current created row to the grid, and empty the row for the next 8 numbers, then the process is repetitive…

1 Like

Hi Kevin, I am trying to understand the code for the past three days but have been unsuccessful. I have also tried console log but may be I do not know what to console log. After doing everything I have put my query here. Any help will be appreciated.

Thank you Zarei. Can you please tell me how to trace the code?

How to trace the code Kevin?

There are dev tools that help you trace through code, but the most basic would be to just put in console.log statements.

I would start with something like:

const grid = [];
const cells = 64;
let counter = 0;
let row;
for (let x = 0; x < cells + 1; x++) {
  console.log('\n***x =', x)
  console.log('counter =', counter)
  console.log('grid =', grid)
  console.log('row =', row)
  if (counter % 8 == 0) {
    if (row != undefined) {
      grid.push(row); 
    }
    row = [];
  }
  counter++;
  let temp = counter;
  row.push(temp);
}
console.log(grid); 

Add more if needed. Personally I think this is pretty messy way to do something simple. But it is a chance to learn.

1 Like

Hi Zarei, can you please elaborate so that I understand better. Thank you for your help.

as Kevin mentioned if you put console.log in your code you can better trace the code.
or put it where ever you don’t understand what is happening .

for (let x = 0; x < cells + 1; x++) {
 console.log("row:",row,"counter:",counter,"grid:",grid)
  if (counter % 8 == 0) {
    console.log("condition 1 is passed")
    if (row != undefined) {
      console.log("condition 2 is passed")
      grid.push(row);
      console.log("grid",grid)
    }
    row = [];
  }
  counter++;
  let temp = counter;
  row.push(temp);
  
}
console.log(grid);
1 Like

Thank you Kevin. I copied and pasted the code:
There are a few questions:
The counter starts from 40 and not from 1 or 0?
Also what is ("\nx =", x)
Why counter, grid and row written in different ways twice?
console.log("\n
x =", x);
console.log(“counter =”, counter);
console.log(“grid =”, grid);
console.log(“row =”, row);

Thank you Zarei. How condition two is passed when row is undefined? Also the code gives reference error.

Hi Zarei, Thank you for explaining. Finally I understood.

1 Like

Thank you Kevin for explaining.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.