Taras Yaremkiv Taras Yaremkiv - 3 months ago 12
Javascript Question

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

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

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;
    }
  }
}

Comments