시스템아 미안해

Chapter 4 - Item 36. 인스턴스 상태는 반드시 인스턴스 객체에만 저장하라 본문

책/Effective JavaScript

Chapter 4 - Item 36. 인스턴스 상태는 반드시 인스턴스 객체에만 저장하라

if else 2025. 8. 10. 19:46

 

인스턴스 상태(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 또는 프로토타입에 둔다.
  • 상태를 잘못 공유하면 디버깅이 매우 어려워진다. 특히 멀티스레드/비동기 로직에서 더 위험하다.