js 읽기 전용(readonly) 전역 변수 사용해서 상태관리 하기(Object.defineProperty, window)

js 읽기 전용(readonly) 전역 변수 사용해서 상태관리 하기(Object.defineProperty, window)

a = 35 일 때, de = 35,
이 상태 일때 a = 12로 변경하면
자동으로 de = 12 로 변경되는 코드를 작성하라

단, de의 값을 임의로 변경하려고 하더라도 a는 변경되지 않고
de도 원래 값에서 임의 값으로 변경되지 않는다.


input
1. a = 14;
 console.log('de = ', de);
2. a = 112;
 console.log('de = ', de);
3. a = 124;
   de = 16;
 console.log('de = ', de);

output
1. de = 14
2. de = 112
3. de = 124

 

 

window = var와 동일함. var b  === window.b

여기서 Object.defineProperty(window, 'b(= window.b)', {

    get : () => a

})

Object.defineProperty을 통해서 setter 없이 get만 만들어줘서 전역 읽기 전용 b를 만들어줌,

 

a값이 변함에 따라서만 b를 세팅, b 외 추가적으로 배열이나 객체로 만들어서 관리 가능.

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Object.defineProperty() - JavaScript | MDN

Object.defineProperty()

Object.defineProperty() 정적 메서드는 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환합니다. 

 

 

 

여러 프로퍼티면 Object.defineProperties() 임

 

 

https://reverse-ant-success.tistory.com/81

2. vue.js의 Reactivity(반응형) 구현 | Object.defineProperty() 객체의 동작을 재정의 하는 API | get: 속성에

 

 

 

https://handhand.tistory.com/258

 

[Vue.js] 반응형 시스템의 내부 동작 방식 살펴보기

vue.js 같은 라이브러리가 상태 변화를 감지할 때 Object.defineProperty()를 사용해 유사하게 진행.