class Space {
  constructor(x, y, c = 'grey',c2 = 'darkgrey') {
    this.x = x;
    this.y = y;
    this.w = 10;
    this.h = 10;
    this.c = c;
    this.c2 = c2;
  }
  draw() {
    drawSpace(this.x,this.y,this.c,this.c2)
  }
}
 
// Creates grid for movement
function createGrid() {
  for (let i = 0; i < 80; i+=1) {
    let tempArr = [];
    for (let j = 0; j < 40; j+=1) {
      tempArr.push(new Space(i,j));
    }
    grid.push(tempArr);    
  }
  grid[0][0] = pathfinder;
  grid[79][0] = target;
}

//draws grid
grid.forEach(function(e) {
  e.forEach(function(f) {
    f.draw();
  });
});

What's not shown is the implementation of the "pathfinder" and "target" variables. They are also "Space" objects with specific green/red colors respectively.

The issue arises with the line grid[80][0] = target; Where I get an error stating that I cannot set properties of undefined. (setting 0). This is referencing the '0' that should be from the 0th index of the 80th array. When console.log(grid[80][0]); I do get the base Space Object that was set in the original for loop. Why is this happening/how can I set the value of the index to the needed Space object 'target'.

Edit - The

    grid[0][0] = pathfinder;
    grid[80][0] = target;

is on the first for loop.

Edit 2 - It does it on grid[1][0] as well, I understand that the grid[80][0] doesn't exist as its going 0-79.