What is the problem in this loop inside a constructor function? [JS]

Question

I am triying to create a constructor function in order to aferwards be able to instance it to create game boards objects. The program is simple, I just passed the constructor the number of rows and it has to create them.

The for loop is not working and I dont understand the reason, ySize variable is defined. If I remove the for the program works sucessfully and create the section with no problem. Which is the problem with the for loop?

Thank you very much for your time

function AlgorithmType(ySize) {
  this.ySize = ySize;
  this.createBoard = function() {
    let selector; let row
    for(let i = 0; i ++; i <= this.ySize) {
      debugger; // Debugger is not executed
      selector = document.querySelector(".mainContainer")
      row = document.createElement("section")
      selector.appendChild(row) 
    }
  }
}

let testBoard = new AlgorithmType(5)
testBoard.createBoard() //expected to create 5 rows

NullDev · Accepted Answer · 2020-07-18 10:37:58Z

1

Your function rebinds this, which is why this.ySize is not defined. Use an arrow function to access this of the lexical scope (parent scope):

function AlgorithmType(ySize) {
  this.ySize = ySize;
  this.createBoard = () => {
    let selector; let row
    for(let i = 0; i <= this.ySize; i++) {
      debugger; // Debugger is not executed
      selector = document.querySelector(".mainContainer")
      row = document.createElement("section")
      selector.appendChild(row) 
    }
  }
}

Side note: As @atomNULL pointed out, your for-loop syntax is incorrect as well. See his answer

edited Jul 18, 2020 at 10:37

answered Jul 18, 2020 at 10:30

NullDev

7,3784 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

atomNULL · Accepted Answer · 2020-07-18 10:33:07Z

1

Your for loop syntax is wrong, the correct syntax would be:

for (let i = 0; i <= this.ySize; i++)

Also you should use an arrow function to access this instead of rebinding it current way.

answered Jul 18, 2020 at 10:33

atomNULL

2691 gold badge3 silver badges7 bronze badges

Collectives™ on Stack Overflow

What is the problem in this loop inside a constructor function? [JS]

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related