JavaScript - Everything being stored from for loop stores as undefined

Question

I have recently gotten started in using the JavaScript programming language. No, this is not my first language, but this is one of my first time using it. I am trying to create a chess program using the HTML5 canvas capability. I am using a for loop to create an array of all of the positions for the chess pieces. I run into one problem; it stores all of the coordinates as undefined. Bellow is the code for the functions that store these values.

var board = [];

function createBoard() {
  var integer = 0;
  for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 8; j++) {
      board[integer] = new Position(i, j);
      integer++;
    }
  }
}

function replacePosition(position1, position2) {
  var i = board.indexOf(position1);
  board[i] = position2;
}

function getPosition(x, y) {
    for (var position in board) {
      console.log("(" + position.x + "," + position.y + ")");
      if (position.x == x && position.y == y) {
        return position;
      }
    }
    return null;

Here is the Position class if you need it.

class Position {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.piece = null;
  }
}

I run createBoard(), and then I attempt to use getPosition(). I says that my code does not work with a null value. If I look at the console, it keeps logging "(undefined,undefined)." I did a little research, but the only thing I could find was asynchronous. I tried to look into that, but I could not figure out how to fix it. Does anyone know how to fix this?

score 2 · Answer 1 · answered Feb 11 '17 at 23:07

2

I would just do

function getPosition(x, y) {
  return board[x*8 + y];
}

answered Feb 11 '17 at 23:07

rasmeister

1,986
1
13
19

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

A for ... in loop in JavaScript iterates over the property names of an object, not the property values.

You shouldn't use a for ... in loop anyway. Use a for loop with a numeric index variable, or else use .forEach() or one of the other Array iterator methods (in this case probably .find()):

function getPosition(x, y) {
  for (var i = 0; i < board.length; ++i) {
    var position = board[i];
    console.log("(" + position.x + "," + position.y + ")");
    if (position.x == x && position.y == y) {
      return position;
    }
  }
  return null;
}

or

function getPosition(x, y) {
  return board.find(function(p) {
    if (p && p.x == x && p.y == y)
      return p;
    return false;
  };
}

edited May 23 '17 at 12:33

Community

1
1

answered Feb 11 '17 at 22:59

Pointy

405,095
59
585
614

Check the last code! I think you meant `p.x == x && p.y == y` not `position.x ==...`! – ibrahim mahrir Feb 11 '17 at 23:04
1

One thing just replace the whole body of `find` with: `return p.x == x && p.y == y`. As the `find` calback should return a boolean not an object! – ibrahim mahrir Feb 11 '17 at 23:05
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find – ibrahim mahrir Feb 11 '17 at 23:06
@ibrahimmahrir well a reference to a non-empty object will be treated as `true`. However, the code could be improved so that it tests for `undefined` array elements, since unlike `.forEach()` the `.find()` function iterates through *all* elements of the array, not just defined ones. – Pointy Feb 11 '17 at 23:10
Thank you. That worked. I will note to use only numerical for loops in the future. Thanks again. – Kippy Feb 11 '17 at 23:16

JavaScript - Everything being stored from for loop stores as undefined

2 Answers2