Rozbudowywanie obiektu javascript

Cześć :D

Potrzebuję zawrzeć obiekt współrzędnych w obiekcie. Oczywiście używam do tego pętli. Niestety nie bardzo wiem jak tworzyć automatycznie nazwy argumentów (jeśli tak to się nazywa). Oto co mam:

var board = {
	width: 10,
	height: 10,
	boxes: {},
	createBoxes: function () {
	  for (var i=0; i<this.width; i++) {
		  for (var y=0; y<this.height; y++) {
			 var name ="x" + i + "y" + y;
			 this.boxes.name = undefined;
		}
	  }
     }
}

Chcę aby to wyglądało ostatecznie tak:

boxes: {
    x0y0: undefined,
    x0y1: undefined,
    x0y2: undefined,
   .....
    x9y9: undefined
}

Jak mogę to osiągnąć?

Jak robisz this.boxes.name to js nie używa Twojej zmiennej name, tylko próbuje pobrać z obiektu boxes wartość name . Czyli js oczekuje, że będziesz miał coś takiego:

var board = {
    boxes: { name: 'cos tam' }
}

Jeżeli chcesz tworzyć klucze dynamicznie, to musisz użyć innej notacji:

var foo = {};
var key = 'someKey';
foo[key] = 'some value';

Chociaż nie wiem czy to najlepsze rozwiązanie. Jeżeli chcesz mieć taką siatkę to może lepiej jest użyć starych, dobrych tablic?

var boxes = [
  [1, 2, 3],
  [4, 5, 6]
];
boxes[0][0] // to samo, co boxes['x0y0'];

Swoją drogą wtedy możesz swoją siatkę utworzyć tak:

[...new Array(this.width)].map(() => [...new Array(this.height)])

Wiem że boxes[ cośtam ] to sposób odwoływania się do tablicy. Zastanawiam się czy istnieje jakiś bardziej "prawilny" sposób. Ale pomysł z używaniem tu tablicy faktycznie lepszy :) .
Edit:
Nie bardzo rozumiem twoją zaawansowaną notacje mógłbyś to nieco rozpisać?

var board = {
	width: 10,
	height: 10,
	boxes: [ ],
	createBoxes() {
		this.boxes = [new Array(this.boxes.x)].map(() => [...new Array(this.boxes.x.y)])
	}
}

Próbuję to jakoś "zaimplementować" ale coś nie działa.

Zabrakło Ci ... przed new Array() ;)

new Array() tworzy tablicę o podanej długości, ale bez elementów. W związku z czym map się nie wykona. ... to tzw. spread operator. Poczytaj o nim, bo nie chce mi się dublować wiedzy, które pełno w necie. W tym konkretnym przypadku konstrukcja [...new Array(10)] powoduje, że dostajemy tablicę, która nie tylko ma długość 10, ale również jest wypełniona 10 x undefined (bez ... mialbys tablice, ktora ma tylko długość 10 i żadnych elementów. Tak w JS to jest możliwe. Tablica to specjalny typ obiektu, który również ma propertisy ;))

W drugim kroku gdy już mamy tą tablicę wywołujemy na niej map (jak nie wiesz jak on działa, to też zachęcam do poczytania), który każdy element undefined zamienia na kolejną tablicę 10 x undefined. Powyższy kod można również przedstawić tak:

var result = [];
for(var i = 0; i < 10; i++) {
    result[i] = [];
    for(var j = 0; j < 10; j++) {
        result[i][j] = undefined;
    } 
}

Poza tym do konstruktora tablicy powinieneś przekazać długość/wysokość, a nie x i y.

var board = {
    width: 10,
    height: 10,
    boxes: [ ],
    createBoxes() {
        this.boxes = [...new Array(this.width)].map(() => [...new Array(this.height)])
    }
}

var board = {
    width: 10,
    height: 10,
    boxes: [ ],
    createBoxes() {
        this.boxes = [... new Array(this.boxes.x)].map(() => [... new Array(this.boxes.x.y)])
    }
}

Gdy używam board.createBoxes()
Wujek google wypluwa:

VM83:6 Uncaught TypeError: Cannot read property 'y' of undefined
    at boxes.map (<anonymous>:6:90)
    at Array.map (<anonymous>)
    at Object.createBoxes (<anonymous>:6:52)
    at <anonymous>:1:7

Jest jeszcze alternatywny zapis (moze czytelniejszy?)

new Array(10).fill(new Array(10).fill(undefined))

Czyli tworzymy tablicę o długości 10 wypełnioną tablicami, które są wypełnione pustymi wartościami :D