How to get value on the table display on console.log()?

Question

I create demo game Tic Tac Toe with OOP javascript. But I have problem with get value at table which have attached value then display the table in console.log();

This is my code:

 /**
 * @constructor
 * @param {Number} width - dimension width for table
 * @param {Number} height - dimension height for table
 */


function Table(width, height) {
  this.table = new Array(height * width);
  this.width = width;
  this.height = height;
}

Table.prototype = {
  /**
   * Representation for get width of table
   */
  getWidth: function () {
    return this.width;
  },

  /**
   * Representation for get height of table
   */
  getHeight: function () {
    return this.height;
  },

  /**
   * Representation for get table array 2d
   */
  getTable: function () {
    var x = new Array(this.getHeight());
    for (var i = 0; i < this.getHeight(); i++) {
      x[i] = new Array(this.getWidth());
    };
  },

  /**
   * Representation for set position of table
   */
  setPosition: function (x, y, ch) {
    return this.table[x][y] = ch;
  },

---

I have problem it here. I can't get value at table and check isEmpty.

  /**
   * Representation for get value detail at cell of table
   */
  getValueAt: function (x, y) {
    return this.table[x][y];
  },

  /**
   * Representation for check empty conditional
   */
  isEmptyAt: function (x, y) {
    if (!this.table[x][y])
      return true;
  },
};

/**
 * @constructor
 * @param {String} character - X or O
 */
function Player(name, ch) {
  this.name = name;
  this.ch = ch;
}

var Printer = function () {
};

---

This is function print display in console.log().

Printer.prototype = {
  /**
   * Representation print table
   */
  printTable: function (table) {
    var str = '';
    for (var i = 0; i < table.width; i++) {
      var x = i;
      for (var j = 0; j < table.height; j++) {
        var y = j;
        str += '' + table.getValueAt(x, y) +  '|';
      }

      str += '\n------------\n';
    }

    console.log(str);
  },

  /**
   * Representation check winner conditional
   */
  printWinner: function (player) {

  },
};
Math.floor(Math.random() * 2);

/**
 * @param newTable [array] : The array two-direction table
 * @param player [object] : the object contain player X and O
 */
var GamePlay = function (table, playerOne, playerTwo) {
  this.table = table;
  this.playerOne = playerOne;
  this.playerTwo = playerTwo;
  this.printer = new Printer();
};

GamePlay.prototype = {

  run: function (x, y) {
    console.log('Game start ...!');
    x = Math.floor(Math.random() * 2);
    y = Math.floor(Math.random() * 2);

    this.putChessman(x, y, this.playerOne.ch);
    console.log('put', this.putChessman());
    this.printer.printTable(this.table);
  },

  /**
   * @param player [keywork] : the keywork X and O
   */
  checkWin: function (player) {

  },

  putChessman: function (x, y, ch) {
    console.log('isEmptyAt', table.isEmptyAt(x, y));
    if (this.table.isEmptyAt(x, y) === true) {
      console.log('@ player ' + ch + ' put');
      this.table.setPosition(x, y, ch);
    } else {
      console.log('@ Other player already put on it');
    }
  },

};

var table = new Table(3, 3);
var playerOne = new Player('playerOne', 'O');
var playerTwo = new Player('playerTwo', 'X');
var game = new GamePlay(table, playerOne, playerTwo);
game.run();

Please help me resolve problem -.-

Answer 1

You're not initializing table correctly. You're doing this:

this.table = new Array(height * width);

...but later trying to use it like this:

this.table[x][y];

To use it like that, you need not just an array, but an array of arrays (JavaScript's equivalent of a two-dimensional array). To initialize an array of arrays, you do this:

this.table = [];
for (var x = 0; x < width; ++x) {
    this.table[x] = new Array(y);
}

Note that the entries in the sub-arrays (e.g., this.table[0][0]) will be undefined*. If that's what you want (it would work with isEmptyAt), that's fine. If you want them to have a different value, you need to fill that in:

this.table = [];
for (var x = 0; x < width; ++x) {
    this.table[x] = [];
    for (var y = 0; y < height; ++y) {
        this.table[x][y] = theValueGoesHere;
    }
}

---

Separately: Calling isEmptyAt will result in either true or undefined, because isEmptyAt only returns a value when it returns true; in the other case, it doesn't return anything, and the result of calling it is the value undefined. Instead, I would have it explicitly return something in both cases:

isEmptyAt: function(x, y) {
    return !this.table[x][y];
}

---

* Technically, with new Array(height), the entries won't be there at all; despite the array having a length of height, it has no entries at all until you add them. But when you try to retrieve an entry, you'll get the value undefined, so I fudged the explanation a bit for simplicity.