Strange and inconsistent behavior during modifying an object in JavaScript in Chrome environment [duplicate]

I could not find anything remotely close to this problem anywhere else on the internet. This is simply a bizarre issue. I am making a Chess game using Typescript. I have a Validator class that holds all the states of the game including an object representation for an Chess board, which is modified after each valid move. And that's where the bug occurs. Here is the board object ->

export interface BoardType {
    [file: string]: {
        [rank: string]: string;
    };
}

export const BoardMap: BoardType = {
    a: {
        '1': '',
        '2': '',
        '3': '',
        '4': '',
        '5': '',
        '6': '',
        '7': '',
        '8': '',
    },

then 7 more files. I have a function that takes this board object and adds the pieces according to the given FEN string. That function works correctly and is not relevant here. After running that function with the default FEN the board[a]['1'] would be 'R' (white Rook), board[g]['8'] would be 'n' (black Knight) and so on. Here is the code that updates the board and where the issue is most likely occurring ->

export const updateBoardMap = (
  piece: string,
  origin: string,
  dest: string,
  boardMap: BoardType
): BoardType => {
  // getOriginAndDestInfo works correctly
  const [originFile, originRank, destFile, destRank] = getOriginAndDestInfo(
    origin,
    dest
  );

  let boardMapToUpdate: BoardType = { ...boardMap };

  // Empty the original square and place the piece on the destination square
  boardMapToUpdate[originFile][originRank] = '';
  boardMapToUpdate[destFile][destRank] = piece;

  return boardMapToUpdate;
};

This updateBoardMap function is called here ->

private NewMove(): void {
    // Update the board map
    const updatedBoardMap = helpers.updateBoardMap(
      this.movingPiece,
      this.movingPiecesOrigin,
      this.movingPiecesDest,
      this.boardMap
    );
    
    this.boardMap = { ...updatedBoardMap };
    
    // Toggle the color's turn
    this.whitesTurn = !this.whitesTurn;
}

This is only called only if the move is valid. Alright, so here is the actual issue. The function updates the board most of the time correctly, about 50% of the time, but for the rest of the cases, it adds random pieces on random squares on the board with no pattern whatsoever. For example, if I play the move 1. e4, it sometimes adds a black pawn on e6 (the original e7 pawn is still there though) or a King on d5 etc. If I reload the page and play 1. e4 again, it might put pieces on totally random squares or will not do anything odd at all and work perfectly. I will post two scrreenshots of what it looks like.

You will see that after the first move, it adds random pieces on random squares. This is incredibly frustrating. This happens ONLY in the browser environment (Chrome) and never on Node. And since the validity of a move depends on boardMap I might not be able to play moves that should be valid. Like,if it puts a pawn on e6, I won't be able to play 1. ..e5 even though that move would have been valid without the bug.

I have 0 idea why this occurs. This is not a very complicated operation. I know that objects are passed by references so I am using the spread operator {...} both times. I have wrote extensive tests for this function with many moves and all of them pass. This issue never occurs in Node as I mentioned earlier. I have tested it in different ways many, many times and it always works. But as soon as I am on the browser, it shows up. There is no consistency or pattern and honestly I am out of ideas to solve this. I would highly appreciate someone solving this mystery for me. Thank you.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/MqyfUEt