Javascript 변수 값의 변경을 감지하기

1. getter, setter 활용

const myObj = {
  this.someProperty = someValue;
  
  get someProperty() {
    return this.someProperty
  }
  
  set someProperty(newValue) {
    this.someProperty = newValue;
    alert("someProperty is changed!");
  }
};

 

2. defineProperty 활용

defineProperty 메소드는 세 번째 파라미터로 descriptor를 제공하는데, 여기에서도 getter, setter를 설정할 수 있다.

const myObj = {
  someProperty: someValue,
};

Object.defineProperty(myObj, "someProperty", {
  get() {
    return this.someProperty;
  },
  set(newValue) {
    this.someProperty = newValue;
    alert("someProperty is changed!");
  },
});

 

 

위 두 방식을 활용할 경우 myObj.someProperty 의 값이 변경되면 alert으로 이를 감지할 수 있다.

이 전에 작성했던 getter 와 setter 의 사용 글에서 언급하지 않았던 부가적인 기능으로 볼 수 있겠다.