자바스크립트 자료구조 Map과 Set

자료구조인 Map과 Set을 써야 할 때가 있었는데, 정확히 이해하지 못한 채 객체/배열로만 풀다가 코드가 복잡해진 적이 있다. 이번에 개념이랑 사용 패턴을 한 번에 정리해뒀다.

Map이란?

Map은 키-값(key-value) 쌍으로 데이터를 저장하는 자료구조다.

겉으로 보기에는 객체(Object)랑 비슷하지만, 차이가 있다.

구분	Object	Map
키의 타입	문자열 / 심볼 (숫자는 문자열로 변환됨)	모든 값(객체, 함수, 원시값 등) 가능
키의 순서	규칙에 따라 순서가 정해짐(삽입 순서처럼 보이지만 예외가 있음)	삽입 순서대로 순회
크기 확인	`Object.keys(obj).length`	`map.size`
반복 가능 여부	기본적으로 iterable 아님	iterable (`for...of` 가능)

Object의 “키 순서”는 완전 랜덤이 아니라 규칙이 정의돼 있다. 다만 Map처럼 “그냥 넣은 순서 그대로”라고 단정하면 헷갈릴 수 있다(정수처럼 보이는 키는 먼저 정렬되는 규칙이 있다).

Map 생성과 기본 메서드

new Map() – 맵 생성
map.set(key, value) – key로 value 저장
map.get(key) – key에 해당하는 값 반환(없으면 undefined)
map.has(key) – key 존재 여부
map.delete(key) – key 삭제
map.clear() – 전체 삭제
map.size – 요소 개수

JavaScript

const map = new Map();
 
// 값 추가
map.set("name", "지훈");
map.set("age", 25);
map.set(true, "참 값도 가능");
 
// 값 조회
console.log(map.get("name")); // "지훈"
 
// 존재 여부 확인
console.log(map.has("age")); // true
 
// 삭제
map.delete("age");
 
// 전체 개수
console.log(map.size); // 2
 
// set()은 Map 자신을 반환해서 체이닝이 가능하다.
map.set("a", 1).set("b", 2).set("c", 3);

Map 순회하기

Map은 iterable이라서 for...of, forEach, keys(), values(), entries()를 사용할 수 있다.

map.keys() – 키 이터레이터 반환
map.values() – 값 이터레이터 반환
map.entries() – [키, 값] 이터레이터 반환 (Map의 기본 순회 형태)

JavaScript

const map = new Map([
  ["name", "지훈"],
  ["age", 28],
  ["job", "frontend"],
]);
 
// [1] entries() – 기본 순회 (Map은 기본이 entries()처럼 동작한다)
for (const [key, value] of map) {
  console.log(key, value);
}
 
// [2] keys()
for (const key of map.keys()) {
  console.log(key);
}
 
// [3] values()
for (const value of map.values()) {
  console.log(value);
}

Object ↔ Map 변환

Map과 Object는 서로 변환할 수 있다.

JavaScript

const obj = { name: "지훈", age: 28 };
const map = new Map(Object.entries(obj));
 
console.log(map.get("name")); // "지훈"
 
const newObj = Object.fromEntries(map);
console.log(newObj); // { name: "지훈", age: 28 }

Set이란?

Set은 중복되지 않는 값만 저장하는 집합 자료구조다.

중복을 자동으로 제거하기 때문에, 배열에서 중복 제거할 때 자주 쓴다.

Set의 주요 메서드

new Set(iterable) – Set 생성(배열을 전달하면 값들을 복사)
set.add(value) – 값 추가 후 Set 자신 반환
set.delete(value) – 값 제거 후 성공 여부(true/false) 반환
set.has(value) – 값 존재 여부
set.clear() – 전체 삭제
set.size – 요소 개수

JavaScript

const set = new Set();
 
set.add("apple");
set.add("banana");
set.add("apple"); // 중복이라 무시됨
 
console.log(set.size); // 2

Set 순회하기

Set도 iterable이라서 for...of, forEach를 사용할 수 있다.

JavaScript

const set = new Set(["apple", "banana", "cherry"]);
 
for (const value of set) {
  console.log(value);
}
 
set.forEach((value) => console.log(value));

배열 ↔ Set 변환

JavaScript

const arr = ["apple", "banana", "apple", "orange"];
const set = new Set(arr);
 
console.log(set); // Set(3) {"apple", "banana", "orange"}
 
// 다시 배열로 변환
const uniqueArr = [...set];
console.log(uniqueArr); // ["apple", "banana", "orange"]

마치며

예전에는 객체/배열로만 처리하려고 해서 중복 제거 같은 작업도 메서드를 여러 번 섞어 쓰느라 코드가 지저분해졌다. 이제는 “키-값”이면 Map, “중복 없는 값 모음”이면 Set부터 떠올리고 시작하는 게 더 단순하다.

참고자료

모던 자바스크립트 튜토리얼(Map과 Set): https://ko.javascript.info/map-set