Is it possible to make my own callback for a certain static variable?

Sometimes function has built-in callback function, "This function is called when something happens"

In my case, I want to make callback function which is called after a certain static value is changed

For example,

class MyVariable(){
    static myVal = 1;
}


const FileUploader = (props) =>{
    myAlert(){
       console.log("val is changed!"); 
    }
    changeValue2(){
      MyVariable.myVal = 2;
      myAlert();
      
    }
    changeValue3(){
      MyVariable.myVal = 3; 
      myAlert();
    } 
    changeValue4(){
      MyVariable.myVal = 4; 
      myAlert();
    } 
}

I want to call myAlert() after myVal is changed.

so currently I write myAlert() third times.

I wonder is it possible to do this automatically like making the callback which is called when myVal is changed

Is there any way for this idea? I am using React

You could define a setter and use a private field to store the value.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

class MyVariable {
    static #myVal = 1;
    static get myVal() {
        return MyVariable.#myVal;
    }
    static set myVal(newVal) {
        if (newVal !== MyVariable.#myVal) {
            console.log('changing myVal to', newVal); // or call myAlert()
            MyVariable.#myVal = newVal;
        }
    }
}
console.log(MyVariable.myVal);
MyVariable.myVal = 2;
console.log(MyVariable.myVal);

<!-- end snippet -->

You can change myVal to a setter and also allow registering of listeners or subscribers. Then, when the value is changed, call the listeners from within the setter.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

class MyVariable {
  static #subscribers = [];
  static #myVal = 1;
  
  static set myVal(newVal) {
    const oldVal = this.#myVal;
    
    if (newVal !== oldVal) {
      this.#myVal = newVal;
      this.#subscribers.forEach((listener) => {
        listener(oldVal, newVal);
      });
    }
  }
  
  static get myVal() {
    return this.#myVal;
  }
  
  static subscribe(listener) {
    const idx = this.#subscribers.push(listener) - 1;
    
    // return an unsubscribe function
    return () => {
      this.#subscribers.splice(idx, 1);
    };
  }
}

const unsub = MyVariable.subscribe((oldVal, newVal) => {
  console.log(`val is changed! From ${oldVal} to ${newVal}`);
});

MyVariable.myVal = 2;
MyVariable.myVal = 3;

unsub();
MyVariable.myVal = 4; // no alert after unsubscribe

<!-- end snippet -->