Making an object property unchangeable through reassignment but modifiable in JavaScript

Question

class Hero extends Character {
constructor (name, race, gender, role, level){
    super(name, race, gender, role, level);
    this.inventory = [];
    this.experience = {
        experienceNeeded: 100,
        experienceObtained: 0
    };
    this.gold = 0;
}

I have this class which defines how a player Character will be. I want to make both experienceObtained and gold properties unchangeable through reassignment but modifiable through operators to avoid users set their own values to these properties using console.

this.gold = {
        amount: 0,
        get gold(){
            return this.amount;
        }
    };

As showed above I tried using a getter without declaring a setter but I still can assign amount any value through console.

I don't know if I am misunderstanding the use of getters and setters in JavaScript or if it is not possible to do.

There's not a lot you can do to defend against client-side modifications of your data. The browser belongs to the user, ultimately. — Pointy, Mar 29 '19 at 00:41

score 0 · Accepted Answer · answered Mar 29 '19 at 01:00

to avoid users set their own values to these properties using console.

The easiest way to do this would simply be to prevent a Hero instance from being accessible from the top level - for example, wrap everything in an IIFE:

(() => {
  const hero = new Hero();
  // do stuff with hero
})();

Then, everything you do inside the IIFE will be nominally private - a user wouldn't be able to go into the console and reference and change what they want. (Still, since it is their browser, they could do it other ways, such as with a userscript - you can't trust anything that runs on the client's machine to be done legitimately.)

Using a similar method, relying on the nominal privacy of a closure, you can make amount a getter of a closure variable without a setter, ensuring that amount is not changeable from the outside (unless, of course, the source code is altered, in which case all bets are off anyway):

const Hero = (() => {
  const privateHeroGold = new WeakMap();
  return class Hero {
    constructor() {
      privateHeroGold.set(this, 0);
    }
    get gold() {
      return privateHeroGold.get(this);
    }
    set gold(g) {
      console.log("You're not allowed to do that!");
    }
  }
})();
const hero = new Hero();
console.log(hero.gold);
hero.gold = 5;
console.log(hero.gold);

Wouldn't that make `hero.gold` unmodifiable through operators if I use a function to modify and add value using something like `hero.gold += 1` later? — Zlorak, Mar 29 '19 at 01:22
You can put all the logic that changes the value *inside the closure*, by using the WeakMap. — CertainPerformance, Mar 29 '19 at 01:36

Making an object property unchangeable through reassignment but modifiable in JavaScript

1 Answers1