Reset an array and have it be mutable again

I am making tic-tac-toe from TOP, I’m not looking for someone to do my homework I just think I’m severely misunderstanding arrays, and or scope. I have a module “Game” where I store the game info

const Game = (()=>{

    //Beginning state of the board, what I want to reset after every win/draw  
    let board = [null, null, null, null, null, null, null, null, null];
    const add = (value, index) =>{
        board[index] = value;
    }

    const reset = () => {
     board = [null, null, null, null, null, null, null, null, null]
    }

    return {board, add, reset}

})();

It is all controlled from a controller module, that sets up the players, plays the round, changes the turn and so on. For the first round after refreshing it works perfectly, the problem arises when I need to clear everything for the next round.

The current Game.reset() is just one way I’ve tried doing it, I’ve tried to reference it with a function argument, that I would call later on, I thought calling it direct in the Game module, using array methods, I’ve tried for sure 10 ways that I could think of and none work, some reset the array to all nulls, some don’t but in each one I can’t play the round again.

If it resets successfully then it just stays empty, regardless if I press another field or not, I’m guessing that’s got to do with the fact that I define the array in the beginning of the module, but I’m not sure. Basically my question is how to be able to “call” the Game module every time from the beginning if I want to reset the game, or why is it blocking like that

Here’s my repo https://github.com/krisboz/tic-tac-toe I know it’s complete chaos because on index2.js I made it almost work then decided to refactor it for index3.js and now I’m stuck again on the same problem, although it looks a bit cleaner maybe haha.

Answer

References do not own their data.

Your return statement creates a new reference to the same array, but while initially both of those board variables are pointing to the same memory address, changing the one to show a different array (which will exist in a separate memory address, not overwrite the original) , will not affect the other variable, because it is still pointing at the same address as before.

What you’d want to do here is change the current object’s board with the this keyword.

Naturally you’d try something like

const reset = () => {
    this.board = [null, null, null, null, null, null, null, null, null]
}

but that will lead you into a different rabbit hole of confusion, which is the difference between function and arrow function scopes.

using the this keyword on the arrow function would refer to the Window global, because it is bound at the function’s creation.

You could instead use

function reset() {
    this.board = [null, null, null, null, null, null, null, null, null]
}

where this is evaluated at the moment it is called (unless you bind the function manually).

This whole issue will hopefully vanish once you start writing classes for your objects.