자바스크립트 컬렉션, Object/Map/Set, 언제 뭘 써야 할까?

자바스크립트(JavaScript)에서 Object, Map, Set은 데이터 저장 방식의 핵심 선택지이며, 각 컬렉션의 특징을 이해하는 것이 중요함

Object는 JSON 호환 및 레코드(Record) 표현에 강점, Map은 키-값 저장소, Set은 중복 없는 값의 집합 표현에 적합함

실무에서는 API 응답 가공, 캐싱, UI 선택 상태 관리 등 다양한 상황에서 컬렉션 선택이 성능과 코드 가독성에 영향을 미침

JSON 직렬화(JSON Serialization)가 필요한 경우 Object/Array가 유리하며, Map/Set 사용 시 변환 규칙 설계가 필요함

Object의 장점과 함정

Object는 JSON 직렬화(JSON Serialization)에 최적화되어 있어, 서버 전송 및 로컬스토리지(Local Storage) 저장에 용이하다. 하지만, 객체의 프로퍼티 키는 문자열 또는 심볼로 제한되며, 숫자 키는 문자열로 변환되어 예상치 못한 버그를 유발할 수 있다.

프로토타입 체인(Prototype Chain)의 영향: in 연산자는 프로토타입까지 탐색하므로, Object.hasOwn을 사용하여 직접 정의된 키를 확인해야 함

크기 확인(Size Check)의 비효율성: Object.keys(obj).length는 키 배열을 생성하므로, 빈번한 호출 시 성능 저하를 유발할 수 있음

결론적으로, Object는 레코드(Record)나 JSON 데이터 표현에 적합하지만, 딕셔너리(Dictionary)로 사용할 때는 키 타입 제약(Key Type Constraint)과 프로토타입 영향에 주의해야 한다.

Map의 강력한 기능: 키 타입과 API

Map은 키-값 저장소에 특화된 자료구조로, 키 타입에 제약이 없고, size, has, get, set, delete API를 통해 코드의 의도(Code Intent)를 명확하게 드러낸다. 특히, React/Next.js 환경에서 API 응답을 인덱싱하거나 캐싱(Caching)할 때 유용하다.

다양한 키 타입 지원: 숫자, 문자열, 객체, 함수 등 다양한 타입을 키로 사용할 수 있으며, 문자열 변환에 의존하지 않음

명확한 API: size, has, get, set, delete API를 통해 자료구조의 의도(Data Structure Intent)를 명확하게 표현

실무 활용: API 응답을 Map 인덱스로 변환하여 조회 비용을 줄이고, Next.js에서 캐시(Cache)를 구현하는 데 활용

Map은 인덱스(Index) 또는 캐시(Cache)를 구현할 때 Object보다 더 적합한 선택이다.

Set을 활용한 상태 관리

Set은 중복 없는 값의 집합을 표현하며, includes, filter 대신 has, add, delete API를 사용하여 코드 가독성(Code Readability)을 높인다. React UI에서 선택 상태, 방문 여부, 토글 가능한 상태를 관리하는 데 적합하다.

중복 방지: 중복된 값의 추가를 자동으로 방지하여 데이터의 일관성 유지

간결한 API: has, add, delete API를 통해 상태 관리 로직(State Management Logic)을 직관적으로 표현

React UI에서의 활용: 체크박스 선택 상태, 방문 여부 플래그(Flag) 관리 시 Set을 활용하여 코드 간결화

Set은 선택 상태(Selection State) 관리에 특화된 컬렉션이다.