시스템아 미안해
Chapter 4 - Item 36. 인스턴스 상태는 반드시 인스턴스 객체에만 저장하라 본문
인스턴스 상태(instance state)란, 각 객체마다 달라야 하는 값들을 말한다.
예를 들어, 사용자 이름, 카운터 값, 위치 좌표 같은 개별 객체만의 데이터이다.
이 값을 프로토타입에 저장하면 모든 인스턴스가 같은 값을 공유하게 된다.
function Counter() {}
Counter.prototype.count = 0; // 잘못된 예시
const c1 = new Counter();
const c2 = new Counter();
c1.count++;
console.log(c2.count); // 1 (c1 변경이 c2에도 반영됨)
여기서 count는 인스턴스마다 독립적이어야 하는데,
프로토타입에 저장했기 때문에 공유 상태가 되어버렸다.
책에서는 인스턴스마다 값이 달라야 하는 데이터는 생성자(constructor) 안에서 this에 할당해야 한다고 말한다.
function Counter() {
this.count = 0; // 인스턴스별로 독립적인 값
}
const c1 = new Counter();
const c2 = new Counter();
c1.count++;
console.log(c2.count); // 0 (서로 영향 없음)
ES6이후 class 문법을 쓰면 생성자나 필드 선언부에서 인스턴스 상태를 깔끔하게 정의할 수 있다.
class Counter {
count = 0; // 인스턴스별 상태
// 화살표 함수 필드: this가 인스턴스를 고정
inc = () => {
this.count++;
console.log(this.count);
}
}
const c1 = new Counter();
const c2 = new Counter();
// 콜백으로 전달해도 this가 변하지 않음
setTimeout(c1.inc, 1000); // 1
setTimeout(c2.inc, 1000); // 1
더불어 위와 같이 화살표 함수 필드와 결합하면 인스턴스별 상태 + this 바인딩을 함께 보장할 수도 있다.
- 프로토타입은 메서드만 두고, 데이터(상태)는 무조건 인스턴스에 둔다.
- 공유되어야 하는 상수나 설정 값만 static 또는 프로토타입에 둔다.
- 상태를 잘못 공유하면 디버깅이 매우 어려워진다. 특히 멀티스레드/비동기 로직에서 더 위험하다.
'책 > Effective JavaScript' 카테고리의 다른 글
| Chapter 4 - Item 38. 서브클래스 생성자에서 반드시 슈퍼클래스 생성자를 호출하라 (0) | 2025.08.10 |
|---|---|
| Chapter 4 - Item 37. this의 암묵적 바인딩을 이해하라 (0) | 2025.08.10 |
| Chapter 4 - Item 35. private 데이터를 저장할땐 클로저를 사용하라 (0) | 2025.08.10 |
| Chapter 4 - Item 34. 메서드는 프로토타입에 저장하라 (2) | 2025.08.10 |
| Chapter 4 - Item 33. 생성자를 new에 의존하지 않게 만들기 (0) | 2025.08.10 |