내용에 앞서

자바스크립트는 객체(Object)와 배열(Array)만으로도 대부분의 기능을 구현할 수 있다. 실제로 많은 프로젝트에서 “데이터는 객체에 담고, 목록은 배열로 관리하는” 방식으로 진행되고 있다. ES6 이후 Map과 Set이라는 컬렉션 타입이 추가되면서 선택지가 늘어났고, 이 글에서는 Map과 Set은 무엇인지, 언제 써야하는지, 어떤 장단점을 가지고 있는지 알아보려고 한다.

Object란 무엇인가

우리가 자주 사용하고 알고 있는 객체(Object)는 원시 값(primitive value)을 제외한 모든 것의 기본 구성 요소이자 가장 기본적인 데이터 구조로 사용되고 있다.

이미지와 같이 키(Key)와 값(Value)의 쌍으로 이루어진 컬렉션으로 다양한 데이터를 구조화하고 저장하는데 사용한다. Object는 키(Key)의 삽입 순서를 보장하지 않는다.

const obj = {};
obj['b'] = 1;
obj['a'] = 2;
obj['1'] = 3;
obj['4'] = 4;

console.log(Object.keys(obj));

정수형 키는 오름차순으로 정렬되고, 나머지는 삽입 순서대로 따르기에 코드의 결과는 [‘1’, ‘2’, ‘b’, ‘a’]가 나온다.

객체(Object)는 프로토타입 기반 상속 구조를 가진다.

프로토타입이란 무엇인가

객체(Object)를 만들면 자동으로 toString(), hasOwnProperty 와 같은 기능이 포함된다.

const user = {
  name: "동규",
};

console.log(user.toString()); // '[object Object]'
console.log(user.hasOwnProperty("name")); // true

객체를 만들고 추가하지 않았는데 어떻게 문제 없이 동작하는 것일까 ?

동일한 객체를 여러 개 만들 때 모든 객체가 같은 메서드를 각자 따로 가지면 불필요한 메모리 낭비가 발생한다. 예를 들어 사용자 객체를 100개 만든다고 했을 때 toString()이나 hasOwnProperty 같은 메서드를 100개의 객체가 각자 복사해서 갖는 것은 매우 비효율적이다.

자바스크립트는 이 문제를 프로토타입(Prototype)으로 해결한다. 공통 기능을 Object.prototype이라는 중심 공간에 한 번만 정의해 두고, 생성되는 모든 객체가 이를 공유하여 상속받는 구조로 우리가 직접 구현하지 않은 메서드도 자유롭게 사용할 수 있다.

이렇게 연결되어 상속받는 구조를 프로토타입 체인(Prototype Chain)이라고 한다. 특정 객체에서 원하는 프로퍼티나 메서드를 찾지 못하면, 그 객체가 상속받고 있는 부모 역할의 Object.prototype으로 올라가 다시 탐색한다. 만약 최상위인 Object.prototype에서도 찾지 못하면 프로토타입 체인의 종점인 null에 도달하여 탐색을 멈추고 undefined를 반환한다.

이런 과정을 직접 확인하고 싶다면 Object.getPrototypeOf() 를 사용하면 된다. 이 메서드는 해당 객체가 상속받고 있는 프로토타입을 반환한다.

const user = {
  name: "동규",
};

console.log(Object.getPrototypeOf(user));                        // Object.prototype
console.log(Object.getPrototypeOf(Object.getPrototypeOf(user))); // null

user 객체의 부모는 Object.prototype이고 Object.prototype의 부모는 null이다. 이 null을 만나는 지점이 바로 프로토타입 체인의 끝이다.

Map이란 무엇인가

Map은 객체(Object)와 같이 키(Key)와 값(Value)로 데이터를 저장하는 자료구조이다. 일반 객체(Object)와 비슷해 보이지만, Map은 데이터만을 위해 저장하고 탐색하기 위해 최적화된 자료구조라는 점에서 차이가 있다.

객체(Object)는 키(Key)로 문자열과 심볼(Symbol)만 사용할 수 있지만, Map은 어떤 타입이든 키(Key)로 사용할 수 있다.

const map = new Map();

map.set("name", "동규"); // 문자열 키
map.set(1, "number key"); // 숫자 키
map.set(true, "boolean key"); // 불리언 키

const obj = {
  id: 1,
};
map.set(obj, "object key"); // 객체도 키로 사용 가능

순서 보장

객체(Object)는 정수형 키(Key)가 있으면 삽입 순서와 상관없이 무조건 앞으로 정렬되는 특징이 있다. 반면 Map은 정수형 키(Key)를 넣어도 처음 넣은 순서 그대로 유지가 된다.

데이터 크기(Size) 확인 편의성

객체(Object) 는 내부에서 데이터가 몇 개 있는지 알기 위해 Object.keys(obj).length 처럼 배열로 변환하는 과정을 거쳐야한다. 하지만 Map은 size 프로퍼티를 통해 쉽게 크기를 확인할 수 있다.

const map = new Map();
map.set('name', '동규');
map.set('role', 'frontend');

console.log(map.size); // 2

명확하고 직관적인 메서드

객체(Object)는 값을 다룰 때 obj.key = value, delete obj.key 같은 문법을 사용하지만, Map은 데이터 관리에 최적화된 자료구조이기에 set, get, has, delete같은 메서드를 제공한다.

const map = new Map();

// 데이터 추가 및 조회
map.set('name', '동규');
console.log(map.get('name'));  // '동규'

// 데이터 존재 여부 확인 및 삭제
console.log(map.has('name'));  // true
map.delete('name');
console.log(map.has('name'));  // false

Set이란 무엇인가

Set은 중복을 허용하지 않는 자료구조이다. 배열(Array)처럼 여러 값을 담을 수 있지만, 동일한 값은 하나만 저장된다.

const set = new Set([1, 2, 2, 3, 3]);
console.log(set); // Set(3) { 1, 2, 3 }

Set은 add, has, delete, size와 같이 집합 관리에 최적화된 메서드를 제공한다.

const set = new Set();

set.add('react');
set.add('next');
set.add('react'); // 중복 추가 -> 무시

console.log(set.has('react')); // true
console.log(set.size);         // 2
set.delete('react');
console.log(set.has('react')); // false

배열(Array)에서 includes로 포함 여부를 확인하는 방식과 비교했을 때 Set의 has는 O(1)-시간복잡도로 동작하기에 자주 포함 여부 확인이 필요한 상황에서는 Set이 배열(Array) 보다 효율적이다.

// 배열 방식 전체 순회
const arr = ['js', 'react', 'next'];
console.log(arr.includes('react')); // true

// Set 방식
const set = new Set(['js', 'react', 'next']);
console.log(set.has('react')); // true

※ 배열(Array)는 데이터가 메모리에 순서대로 빈틈없이 나열되어 있고, Set은 내부적으로 해시 테이블(Hash Table)구조로 이루어져 있기에 데이터를 그냥 쌓는게 아닌, 데이터 값을 기반으로 저장될 주소가 계산되기에 효율적인 것이다.

실무에서는 언제 어떻게 사용하는 것이 좋을까

로컬스토리지 저장

우리는 로컬스토리지에 데이터를 저장할 때 주로 Object를 사용한다. Map을 사용하지 않는 이유는 무엇일까 ?

// Object
const settings = {
  theme: "dark",
  lang: "ko",
};
localStorage.setItem("settings", JSON.stringify(settings));

// Map
const map = new Map([['theme', 'dark'], ['lang', 'ko']]);
localStorage.setItem('settings', JSON.stringify(map));

위 코드의 결과를 보면 Object는 {"theme":"dark","lang":"ko"} 로 변환되지만, Map은 {}빈 객체를 반환한다.

JSON.stringify()메서드는 기본적으로 객체의 열거 가능한 속성(enumerable properties)만 직렬화하는데 Map에 담긴 데이터는 해당하지 않기 때문이다.

따라서 Map의 데이터를 로컬스토리지에 저장하려면 아래처럼 별도의 변환 과정을 수행해야 한다.

// 저장 (Map -> Array -> JSON)
localStorage.setItem('settings', JSON.stringify(Array.from(map.entries())));

// 불러올 때 (JSON -> ARRAY -> MAP)
const raw = JSON.parse(localStorage.getItem('settings'));
const restored = new Map(raw);

이렇게 변환 로직이 들어가면 데이터를 저장하고 복원하는 과정이 번거롭고, 이 코드를 다루는 모든 사람이 규칙을 알고있어야 하는 단점이 생긴다.

결과적으로 직렬화가 필수인 로컬스토리지 환경에서는 추가적인 변환 없이 JSON으로 바꿀 수 있는 Object를 사용하는 것이 직관적이고 안전하기에 Object를 사용하는 것이다.

API 응답 데이터 탐색 최적화

const posts = [
  { id: 101, title: 'A' },
  { id: 102, title: 'B' },
  { id: 103, title: 'C' },
];

위 데이터를 단순히 목록으로 렌더링할 때는 배열 구조가 효율적이다. 하지만 상세 패널을 열거나 편집 모달을 띄우는 등 특정 id를 가진 항목을 찾아야 할 때는 보통 아래처럼 find와 같은 메서드를 사용한다.

const target = posts.find((p) => p.id === selectedId);

배열의 find메서드는 최악의 경우 배열의 끝까지 확인해야 하는 선형 탐색(O(N)) 방식으로 동작한다.

데이터 개수가 많고 이 코드가 이벤트 핸들러, 모달 열기, 상태 업데이트마다 반복적으로 실행된다면 불필요한 연산으로 인해 렌더링 성능 저하로 이어질 수 있다.

이러한 경우 Map을 활용해 해시 테이블 기반의 O(1)탐색 구조로 변환하면 탐색 비용을 줄일 수 있다. React 환경이라면 useMemo를 활용해 의존성 배열이 변경될 때만 Map객체를 초기화하도록 제어하는 방법도 존재한다.

const postById = useMemo(
  () => new Map(posts.map((p) => [p.id, p])),
  [posts]
);

const target = postById.get(selectedId);

Array와 Map의 탐색 비용에 대해 측정하는 코드를 작성해봤다.

// 10만 개의 테스트 데이터 생성
const MOCK_SIZE = 100000;
const mockPosts = Array.from({ length: MOCK_SIZE }, (_, i) => ({
  id: i,
  title: `Post ${i}`,
}));

// 배열의 마지막 요소
const targetId = MOCK_SIZE - 1;

// Array.find 탐색 소요 시간
console.time("Array.find");
mockPosts.find((p) => p.id === targetId);
console.timeEnd("Array.find");

// Map.get 탐색 소요 시간
const postMap = new Map(mockPosts.map((p) => [p.id, p]));
console.time("Map.get");
postMap.get(targetId);
console.timeEnd("Map.get");

10만 개의 데이터를 기준으로 동일한 조건에서 Array는 1.282ms가 소요된 반면, Map은 0.017ms의 시간이 소요됐다. 사용 목적과 기준에 따라 구조를 어떻게 잡는 것이 중요하다고 생각된다.

체크박스와 같은 상태 관리

여러 개의 선택된 항목에 대한 값을 관리할 때 보통 useState와 Array를 활용하여 관리한다.

const [selected, setSelected] = useState([]);

const handleToggle = (id) => {
  setSelected((prev) =>
    prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id],
  );
};

위 코드처럼 관리할 경우 includes와 filter 가 매번 전체 배열을 순회하기에 선택 항목이 많아질수록 비용이 늘어나고 코드의 가독성도 떨어진다.

이런 경우 Set을 활용하면 좀 더 효율적인 코드를 만들 수 있다.

const [selected, setSelected] = useState(new Set());

const handleToggle = (id) => {
  setSelected((prev) => {
    const next = new Set(prev);

    if (next.has(id)) {
      next.delete(id);
    } else {
      next.add(id);
    }

    return next;
  });
};

기존 Set을 직접 수정하면 참조 값이 바뀌지 않아 리렌더링이 발생하지 않는다. has로 포함 여부를 확인하고 add, delete로 상태를 변경하는 구조는 배열의 includes와 filter조합보다 읽기 쉽고 조회와 삭제 모두 O(1) 시간 복잡도로 접근하기에 효율적으로 관리할 수 있다.

Object, Map, Set 자세히 알아보자 !