I'm making tic-tac-toe for TOP, this is a factory function for making cells:

const cell = function(token, rowIndex, colIndex) {
        let _token = token;
        const _rowIndex = rowIndex;
        const _colIndex = colIndex;

        const getToken = () => _token;
        const getRowIndex = () => _rowIndex;
        const getColIndex = () => _colIndex;
        const changeToken = (newToken) => _token = newToken;

        return {
            _token,
            getToken,
            getRowIndex,
            getColIndex,
            changeToken,
        };
    };

​

When I print an object and its properties, I get this seemingly contradictory behavior:

myCell = cell('bob', 1, 2);
console.log(myCell);
// Object { _token: "bob", ...}
console.log(myCell.getToken());
// 'bob' 
myCell.changeToken("jimmy");
console.log(myCell);
// Object (_token: "bob", ...};
console.log(myCell.getToken());
// 'jimmy'

Why is this happening? How can the console still show "bob" even when getToken() returns the updated value? I think it's because the _token that takes the argument value, and the _token in the returned object, are actually two different variables. Is this accurate? And is there a way to make these values consistent?