Missed var before "I" in cycle or Uncaught TypeError: Cannot read property 'length' of undefined

Question

I have some javascript code while trying to code a tic tac toe game, but chrome developer tool gives this error

Uncaught TypeError: Cannot read property 'length' of undefined I've found that when I comment 'isEnd(bigArray[i][j]);' in the end of the code, it works. Code:

var inputItem = 'o';
var board = [null, null, null, null, 'o', null, null, null, null];
var sign = {
  max: inputItem === "o" ? "x" : "o",
  min: inputItem === "x" ? "x" : "o"
};

function generateTable(board, sign) {
  var testBoard = [],
    nextBoard;
  for (var i = 0; i < board.length; i++) {
    nextBoard = board.slice();
    if (!nextBoard[i]) {
      nextBoard[i] = sign;
      testBoard.push(nextBoard);
    }
  }
  return testBoard;
}

function isEnd(board) {
  console.log('board', board);
  for (i = 0; i < board.length; i += 3) {
    if (board[i] === board[i + 1] && board[i + 1] === board[i + 2]) {
      return board[i] !== null ? board[i] : false;
    }
  }
  for (var j = 0; j < board.length; j++) {
    if (board[j] === board[j + 3] && board[j + 3] === board[j + 6]) {
      return board[j] !== null ? board[j] : false;
    }
  }

  if ((board[4] === board[0] && board[4] === board[8]) ||
    (board[4] === board[2] && board[4] === board[6])) {
    return board[4] !== null ? board[4] : false;
  }
}

function miniMax() {
  var testBoard = generateTable(board, sign.max);
  testBoard = testBoard.map(function(elem) {
    return generateTable(elem, sign.min);
  });
  return testBoard;
}
var bigArray = miniMax();
console.log(bigArray);


var maxArray = 0;
var tempArray = 0;
var maxCoord = 0;

for (var i = 0; i < bigArray.length; i++) {
  for (var j = 0; j < bigArray[i].length; j++) {
    console.log('i, j: ', i, " ", j);
    isEnd(bigArray[i][j]);
    maxCoord = i;
    if (tempArray > maxArray) {
      maxCoord = i;
    }
  }
}

the result is

i, j:  0   0 Script snippet #21:22  
board ["x", "o", null, null, "o", null, null, null, null] Script snippet #21:57  
i, j:  6   1 Script snippet #21:22
board [null, "o", null, null, "o", null, null, "x", null] 

Answer 1

It's because in the function:

function isEnd(board) {

you have this line:

for (i = 0; i < board.length; i += 3) {

So the i variable is global.

Change this line to:

for (var i = 0; i < board.length; i += 3) {

Example:

var inputItem = 'o';
var board = [null, null, null, null, 'o', null, null, null, null];
var sign = {
  max: inputItem === "o" ? "x" : "o",
  min: inputItem === "x" ? "x" : "o"
};

function generateTable(board, sign) {
  var testBoard = [],
      nextBoard;
  for (var i = 0; i < board.length; i++) {
    nextBoard = board.slice();
    if (!nextBoard[i]) {
      nextBoard[i] = sign;
      testBoard.push(nextBoard);
    }
  }
  return testBoard;
}

function isEnd(board) {
  console.log('board', board);
  
  //
  // This is the only line changed
  //
  for (var i = 0; i < board.length; i += 3) {
    if (board[i] === board[i + 1] && board[i + 1] === board[i + 2]) {
      return board[i] !== null ? board[i] : false;
    }
  }
  for (var j = 0; j < board.length; j++) {
    if (board[j] === board[j + 3] && board[j + 3] === board[j + 6]) {
      return board[j] !== null ? board[j] : false;
    }
  }

  if ((board[4] === board[0] && board[4] === board[8]) ||
      (board[4] === board[2] && board[4] === board[6])) {
    return board[4] !== null ? board[4] : false;
  }
}

function miniMax() {
  var testBoard = generateTable(board, sign.max);
  testBoard = testBoard.map(function(elem) {
    return generateTable(elem, sign.min);
  });
  return testBoard;
}
var bigArray = miniMax();
console.log(bigArray);


var maxArray = 0;
var tempArray = 0;
var maxCoord = 0;

for (var i = 0; i < bigArray.length; i++) {
  for (var j = 0; j < bigArray[i].length; j++) {
    console.log('i, j: ', i, " ", j);
    isEnd(bigArray[i][j]);
    maxCoord = i;
    if (tempArray > maxArray) {
      maxCoord = i;
    }
  }
}