Estoy tratando de vincular funciones que se activan a través de un 'clic' de escucha de eventos, cada una con una función correspondiente que actualiza un obj/arr virtual que representa ese cuadrado. (Como un juego de tres en raya). Cuando se hace clic en un cuadrado y se llama a su función vinculada correspondiente para cambiar el objeto interno, todos los obj en la matriz del contenedor se ven afectados. Aunque se confirma que la función está vinculada a un solo elemento en la matriz.

 const playerController = (() => { const playerClick = (square) => { console.log(gameBoardData.virtualBoard[square]) gameBoardData.virtualBoard[square].clicked = true; // console.log(gameBoardData.virtualBoard[square].clicked) } return { playerClick } })(); const displayController = (() => { const htmlBoard = Array.from(document.querySelector('#gbContainer').children); htmlBoard.forEach((ele, idx) => { ele.addEventListener('click', playerController.playerClick.bind(ele, idx)); }); return { htmlBoard } })(); const gameBoardData = (() => { const virtualBoard = new Array(9); virtualBoard.fill({ clicked: null }); return { virtualBoard, } })(); console.log(gameBoardData.virtualBoard); //event listener to inspect full array. const btn = document.getElementById('addBtn') btn.addEventListener('click', () => addBox()); function addBox() { gameBoardData.virtualBoard.forEach((x) => console.log(x)); }

También fue difícil para mí formular un título adecuado, siéntase libre de editar el título para una mejor claridad/semántica.