Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 상태관리
- 모던자바스크립트
- 부스트캠프웹모바일
- 브라우저 렌더링
- 부스트캠프7기
- 회고
- 멤버십
- DB #데이터베이스
- 타입
- 그룹프로젝트
- 우선순위역전
- 운영체제
- 놀러와요_해커톤
- Java
- 부스트컨퍼런스
- 렌더 트리
- GDSC_PKNU
- 확인문제
- 데이터독립성
- OS
- CSSOM
- 부스트캠프
- 변수
- 모던 자바스크립트
- js
- GDSC
- CRDT
- 우선순위상속프로토콜
- javascript
- 인프콘
Archives
- Today
- Total
dohun.log
[JS] 참조에 의한 전달과 옵저버 패턴 본문
참조에 의한 전달
이전 글에서도 말했듯이 원시 값은 call by value이고, 객체 값은 call by reference이다.
function changePersonName(person) {
person.name = 'hodun';
}
let person = {
name: 'dohun',
age: 22
};
console.log(person); // {name: 'dohun', age: 22}
changePersonName(person);
console.log(person); // {name: 'hodun', age: 22}
changePersonName함수에 매개변수로 person을 전달했을 때 person은 충분히 변경 가능하다는 얘기이다.
이처럼 객체가 변경되면 그 객체를 참조하는 모든 이들에게 객체가 변경됨을 알려주어야 한다.
옵저버 패턴
객체가 변경됐을 때 직접 추적하는 것이 아니라 옵저버가 구독자들에게 알려주는 방법을 사용한다.
Observer 클래스
class Observer {
constructor() {
this.listeners = new Set();
}
subscribe(observer) {
this.listeners.add(observer);
}
notify() {
this.listeners.forEach((listener) => {
listener.notify();
});
}
}
subscribe(): 해당 옵저버를 구독할 수 있다.
notify(): 구독자 모두의 notirfy함수를 실행시킨다.
State 클래스
class State extends Observer {
constructor() {
super();
this.state = {
name: "dohun",
age: 22,
};
}
getState() {
return this.state;
}
setState(newState) {
this.state = { ...this.state, ...newState };
this.notify();
}
}
Oberser를 상속받는 클래스이다.
constructor(): super()를 통해서 부모 클래스인 Observer의 생성자를 먼저 호출하고 state 필드를 초기화시킨다.
getState(): 흔히 아는 getter이다.
setState(): 새로운 state인 newState를 받아 기존의 state를 갱신시킨다. 이후 Observer의 메서드인 notify를 호출해 State를 구독하는 구독자들에게 state가 변경됨을 알린다.
예시
const stateObserver = new State();
const listener1 = {
id: "1",
notify: () => {
console.log("listener1 ::: 상태 변경");
},
};
const listener2 = {
id: "2",
notify: () => {
console.log("listener2 ::: 상태 변경");
},
};
stateObserver.subscribe(listener1);
stateObserver.subscribe(listener2);
listener1, listener2는 stateObserver의 subscribe메서드를 사용해 구독할 수 있다.
console.log("getState::: ", stateObserver.getState());
console.log("setState::: change name dohun -> hodun");
stateObserver.setState({ name: "hodun" });
console.log("getState::: ", stateObserver.getState());
이 코드를 실행하게 되면 결과는 다음과 같다.
stateObserver의 setState를 실행하면 Observer의 구독자들이 등록한 notify함수를 실행시켜준다. 즉 상태가 변경되면 모든 구독자들이 변경됨을 알 수 있다.
'Study > JavaScript' 카테고리의 다른 글
[JS] 원시 값과 객체의 비교 (0) | 2022.05.10 |
---|---|
[JS] 데이터 타입 - 모던 자바스크립트 Deep Dive (0) | 2022.04.11 |
[JS] 표현식과 문 - 모던 자바스크립트 Deep Dive (0) | 2022.04.11 |
[JS] 변수 - 모던 자바스크립트 Deep Dive (0) | 2022.04.10 |
Comments