JavaScript에서 고유한 초기 값 구현: 엄격한 동등성을 활용한 안전한 상태 관리

핵심 기술

이 콘텐츠는 JavaScript에서 null, undefined, false, 0과 같이 흔히 사용되는 값보다 더 고유한 초기 값을 필요로 하는 상황에 대해 탐구합니다. 특히, 엄격한 동등성(===)과 클로저를 활용하여 인스턴스마다 고유한 초기 값을 생성하고 관리하는 패턴을 단계별로 제시합니다.

기술적 세부사항

• 고유 초기 값의 필요성: 데이터 스토어나 훅(hook)에서 초기값을 설정할 때, 이 초기값이 다른 어떤 값과도 일치하지 않도록 보장해야 하는 시나리오가 있습니다.
• 객체의 고유성 활용: JavaScript에서 서로 다른 객체는 엄격한 동등성 비교 시 항상 false를 반환하는 특성을 이용합니다. [] === [] 또는 {} === {}가 false인 점을 활용하여 고유한 객체를 생성하고 비교 대상으로 삼습니다.
• 초기 구현 및 문제점:
  • 모든 인스턴스에서 동일한 INITIAL_VALUE 객체를 공유하면, 한 인스턴스의 초기 값이 다른 인스턴스에 영향을 미쳐 고유성이 깨집니다.
  • get() 메서드가 실제 INITIAL_VALUE 객체 자체를 반환하면, 외부에서 이 객체를 가져와 다시 설정함으로써 고유성이 다시 깨질 수 있습니다.
• 개선된 구현:
  1. 인스턴스별 고유 값: 각 makeValueStore 함수 내부에 const INITIAL_VALUE = {};를 선언하여 인스턴스별로 고유한 객체를 생성합니다.
  2. get() 메서드 수정: get() 메서드는 internalValue가 INITIAL_VALUE일 경우 null을 반환하도록 수정하여 실제 고유 값을 외부에 노출하지 않습니다.
• Symbol을 활용한 대안: JavaScript의 Symbol 타입은 고유성을 위해 설계되었으므로, 이를 INITIAL_VALUE로 사용하여 더 간결하고 명확하게 구현할 수 있습니다.
• Boolean 플래그를 활용한 최종 구현: 초기 값을 외부에 노출할 필요가 없다는 점을 깨닫고, isInitial이라는 Boolean 플래그를 사용하여 초기 상태를 추적하는 더 단순한 방법으로 발전시킵니다. 이 방식은 값의 종류에 상관없이 초기 상태 여부만을 명확하게 구분합니다.

개발 임팩트

이 패턴은 값의 동등성 비교에서 발생할 수 있는 미묘한 함정을 이해하고, 이를 해결하기 위한 JavaScript의 내장 기능을 창의적으로 활용하는 방법을 보여줍니다. 이를 통해 개발자는 보다 견고하고 예측 가능한 상태 관리 로직을 설계할 수 있습니다.