Setting a new variable to a javascript class instance doesn't change original instance

I'm running into a weird problem. When I set a new variable equal to a class instance, the new variable doesn't mutate the class instance.

Currently, I have a class within my class called #cells that is an array containing cells. Each cell has a property called a tile. When I set a new variable, called tempCell = this.#cells[0] and set tempCell.tile = null, this.#cells[0].tile is not 0. Now when I do this.#cells[i].tile = null, and console log this, I get null. Why is this happening? I've attached code to make clear what I'm doing.

class Grid {
#cells
constructor(gameBoardElement) {
this.#cells = createBoard(gameBoardElement);
}
getEmptyCells() {
return this.#cells.filter((cell) => cell.tile === null)
}
getRandomEmptyCell() {
let emptyCells = this.getEmptyCells();
if(emptyCells.length > 0) {
let randomIndex = Math.floor(Math.random() * emptyCells.length);
return emptyCells[randomIndex];
}
}
handleRight() {
for(let i = 0; i < 16; i++) {
if(i % 4 === 3 ) {
continue;
}
this.#combineTwoSquares(i, i+1);
}
}
#combineTwoSquares(firstIndex, secondIndex) {
let firstCell = this.#cells[firstIndex];
let secondCell = this.#cells[secondIndex];
if(firstCell.tile === null) {
return;
}
if(secondCell.tile === null) {
}
}
delete_tiles() {
for(let i = 0; i < 16; i++) {
let cell = this.#cells[i];
if(cell.tile !== null) {
cell.tile.remove();
//This is where the problem arises
cell.tile = null;
//this does not print out null. 
console.log(this.#cells[i].tile)
}
}
}
get tiles() {
let tiles = [];
this.#cells.forEach((cell) => (tiles.push(cell.tile)));
return tiles;
}
}
class Cell {
#cellElement
#x
#y
#tile
constructor(cellElement,x,y, tile = null) {
this.#cellElement = cellElement;
this.#x = x;
this.#y = y;
this.#tile = null;
}
set tile(tile) {
if(tile === null) {
return;
}
this.#tile = tile;
this.#tile.x = this.#x;
this.#tile.y = this.#y;
}
get tile() {
return this.#tile;
}
}
function createBoard(gameBoardElement) {
let cells = []
for(let i = 0; i < 16; i++) {
let x = i % 4;
let y = Math.floor(i/4);
let cellElement = document.createElement("div");
cellElement.classList.add("game-cell");
gameBoardElement.append(cellElement)
let cell = new Cell(cellElement,x,y);
cells.push(cell);
}
return cells;
}
class Tile {
#x
#y
#value
#tileElement
constructor(gameBoard, value = Math.random() > 0.5 ? 2 : 4) {
this.#tileElement = document.createElement("div");
this.#tileElement.classList.add("tile");
gameBoard.appendChild(this.#tileElement);
this.#tileElement.textContent = value;
this.#value = value;
}
get value() {
return this.#value;
}
set value(value) {
this.#tileElement.textContent = value
this.#value = value;
}
get x() {
return this.#x;
}
set x(x) {
this.#x = x;
this.#tileElement.style.setProperty("--x",this.#x);
}
get y() {
return this.#y;
}
set y(y) {
this.#y = y;
this.#tileElement.style.setProperty("--y",this.#y);
}
remove() {
this.#tileElement.remove();
}
}
let gameBoard = document.getElementById("game-board");
window.addEventListener("keydown",handleKeys);
let grid = new Grid(gameBoard);
grid.getRandomEmptyCell().tile = new Tile(gameBoard);
function handleKeys(e) {
switch(e.key) {
case "ArrowRight":
// grid.handleRight();
grid.delete_tiles();
// grid.getRandomEmptyCell().tile = new Tile(gameBoard);
console.log(grid.tiles);
break;
default:
console.log("Not an accurate key");
}
}

You're explicitly returning without doing anything in the setter for the tile property in Cell when the new value is null. You should at least set this.#tile to the new value.

set tile(tile) {
	this.#tile = tile;
	if (tile) {
		this.#tile.x = this.#x;
		this.#tile.y = this.#y;
	}
}