JavaScript Map·Set: 값 조회와 중복 제거 실습

변수와 배열을 알고 있으면 시작할 수 있습니다. new Map()과 new Set()은 각각 빈 Map과 빈 Set을 만드는 표현입니다. 지금은 class 문법이나 내부 구현을 알 필요가 없습니다. 아래 예제는 각각 독립적으로 브라우저 개발자 도구의 Console에 붙여 넣어 실행할 수 있습니다. 변수 이름을 다시 선언했다는 오류가 나오면 새로고침 후 해당 예제를 실행하세요.

선수 지식: JavaScript 변수·배열·조건문을 먼저 익힙니다. 객체 참조나 함수가 낯설면 아래 단계별 예제부터 시작하고, class 전체 구현은 해당 동작을 손으로 추적한 뒤 읽습니다. 각각의 코드는 독립 실행합니다.

1. Map을 가격표라고 생각해 봅니다

가게에서 사과 가격을 찾는다고 생각해 보세요. 상품 이름과 가격을 한 쌍으로 적어 두면 “사과”라는 이름표로 가격을 꺼낼 수 있습니다. 이 이름표를 키(key), 그 이름표에 저장한 내용을 값(value)이라고 합니다.

키: 찾을 때 쓰는 이름표	값: 저장한 내용
사과	1000
바나나	1500

여기서 키는 과일 이름, 값은 가격입니다. 배열의 0번·1번처럼 위치 번호로 찾는 대신, 이름표를 사용한다는 점에 주목하세요.

const prices = new Map();
prices.set('사과', 1000);
prices.set('바나나', 1500);
console.log(prices.get('사과'));
console.log(prices.get('바나나'));

출력:

1000
1500

첫 줄에서 빈 가격표를 만듭니다. set('사과', 1000)은 사과라는 키에 1000을 저장합니다. get('사과')는 같은 키에 저장한 값을 읽습니다. set은 쓰기, get은 읽기로 기억해 보세요.

2. 같은 키에 다시 저장하면 어떻게 될까요?

사과 가격이 1200으로 올랐습니다. 같은 키에 다시 set하면 가격이 바뀝니다. 사과 항목이 두 개 생기는 것은 아닙니다. 한 키는 한 값을 가리킵니다.

const prices = new Map();
prices.set('사과', 1000);
prices.set('사과', 1200);
console.log(prices.get('사과'));
console.log(prices.size);
console.log(prices.has('포도'));
console.log(prices.get('포도'));

출력:

1200
1
false
undefined

size는 저장한 키의 개수입니다. 사과 하나만 있으므로 1입니다. has('포도')는 “포도라는 키가 있는가?”를 물어봅니다. 없으므로 false가 나옵니다. 없는 키를 get으로 읽으면 값이 없다는 뜻의 undefined가 나옵니다.

배열 개수는 length, Map 개수는 size라는 이름을 사용합니다. 지금은 필요한 순간에 이 글을 다시 보고 써도 괜찮습니다.

잠깐 확인: 사과에 1000을 저장하고, 바나나에 1500을 저장하고, 사과에 1200을 저장했습니다. 키는 몇 개이고 사과의 값은 얼마일까요?

정답과 이유 보기

키는 2개, 사과의 값은 1200입니다. 마지막 저장은 새 상품을 추가한 것이 아니라 기존 사과의 값을 바꾼 것입니다.

3. 가격 대신 등장 횟수를 저장해 봅니다

이번에는 장바구니에 ['사과', '바나나', '사과']가 있습니다. “사과가 몇 개 있나요?”에 답하고 싶습니다. Map의 키는 과일 이름으로 그대로 두고, 값에 가격 대신 지금까지 센 개수를 넣으면 됩니다.

읽은 과일	읽기 전 개수	이번 과일까지 센 뒤 Map
첫 사과	없음 → 0으로 시작	사과: 1
바나나	없음 → 0으로 시작	사과: 1, 바나나: 1
두 번째 사과	사과가 이미 1개	사과: 2, 바나나: 1

새 과일을 읽을 때마다 하는 일은 같습니다. 이전 개수를 읽고 → 1을 더하고 → 같은 키에 다시 저장합니다. 사과가 두 번째로 나왔을 때 1을 새로 저장하면 안 됩니다. 기존 1개를 잊지 않고 2개로 바꾸어야 합니다.

const counts = new Map();
counts.set('사과', 1);
const previous = counts.get('사과');
counts.set('사과', previous + 1);
console.log(counts.get('사과'));

출력:

2

previous에는 이전 개수인 1이 들어갑니다. 다음 줄에서 previous + 1, 즉 2를 사과 키에 다시 저장합니다. Map이 알아서 개수를 세는 것이 아닙니다. 우리가 “읽고 1을 더해 다시 저장하는 코드”를 작성한 것입니다.

4. 처음 나온 과일부터 처리하는 전체 코드

처음 나온 과일은 아직 저장된 개수가 없습니다. 따라서 없는 과일은 0부터 시작하도록 처리합니다. for...of는 배열에서 과일을 하나씩 꺼내 같은 일을 반복합니다.

const fruits = ['사과', '바나나', '사과'];
const counts = new Map();
for (const fruit of fruits) {
  if (counts.has(fruit) === false) {
    counts.set(fruit, 0);
  }
  const previous = counts.get(fruit);
  counts.set(fruit, previous + 1);
}
console.log(counts.get('사과'));
console.log(counts.get('바나나'));
console.log(counts.size);

출력:

2
1
2

counts.has(fruit) === false는 아직 세어 본 적이 없는 과일인지 확인합니다. 처음이라면 0을 저장합니다. 이미 센 과일은 이 부분을 건너뛰므로 기존 개수가 사라지지 않습니다. 그다음 get으로 개수를 읽어 1을 더합니다.

마지막 size는 과일 총개수가 아니라 과일 종류의 수입니다. 장바구니에는 3개가 있지만, Map의 키는 사과와 바나나 두 개입니다. 이 차이를 이해하면 투표수, 방문 횟수, 단어 등장 횟수에도 같은 방식을 적용할 수 있습니다.

직접 해 보기: fruits를 ['사과', '사과', '바나나', '포도', '바나나']로 바꾸면 사과 개수, 바나나 개수, size는 각각 얼마일까요?

정답과 과정 보기

2, 2, 3입니다. Map에는 사과: 2, 바나나: 2, 포도: 1이 남습니다. 전체 과일 5개와 종류 3개는 다른 숫자입니다. 사과가 나오는 첫 번째와 두 번째 반복을 종이에 적어 보세요.

5. 횟수가 필요 없으면 Set으로 충분합니다

이번에는 “무슨 과일이 들어 있나요?”만 알고 싶습니다. 사과가 몇 개인지는 필요 없습니다. 같은 값을 한 번만 보관하는 Set을 사용할 수 있습니다. Map과 달리 키와 값을 따로 주지 않습니다. 보관할 값 하나만 add로 넣습니다.

const kinds = new Set();
kinds.add('사과');
kinds.add('바나나');
kinds.add('사과');
console.log(kinds.size);
console.log(kinds.has('사과'));
console.log(kinds.has('포도'));

출력:

2
true
false

세 번 add했지만 사과가 겹치므로 두 종류만 남습니다. 같은 값을 다시 넣어도 개수가 늘지 않습니다. has는 Map에서와 마찬가지로 들어 있는지 확인합니다. Set에는 개수를 따로 저장하지 않았으므로, 이 Set만 보고 원래 사과가 두 개였다는 사실은 알 수 없습니다.

하려는 질문	선택	저장하는 내용
사과 가격이 얼마인가요?	Map	사과 → 1000
사과가 몇 번 나왔나요?	Map	사과 → 2
사과가 들어 있나요?	Set	사과라는 값 자체

6. 중복을 없앤 배열이 필요하다면

결과를 다시 배열로 사용하고 싶을 때가 있습니다. 먼저 배열로 Set을 만들고, 그 Set을 Array.from으로 배열로 바꾸면 됩니다. 두 단계를 나누어 읽어 보세요.

const fruits = ['사과', '바나나', '사과'];
const kinds = new Set(fruits);
const uniqueFruits = Array.from(kinds);
console.log(uniqueFruits.join(', '));
console.log(fruits.length);

출력:

사과, 바나나
3

new Set(fruits)는 배열의 값을 받아 중복 없이 모읍니다. Array.from(kinds)는 그 값을 새 배열에 담습니다. 원본 fruits는 수정하지 않았으므로 길이가 여전히 3입니다. 문자열이나 숫자는 처음 등장한 순서로 남으며, 자동으로 가나다순이나 숫자순으로 정렬되는 것은 아닙니다.

바로 실행해 보는 핵심 예제

독자 질문: ID로 작업을 찾고 선택 목록 중복을 막는 가장 단순한 방법은?

왜 쓰나요? Map은 ID와 작업을 연결하고 Set은 선택한 ID를 한 번씩 보관합니다.

아래 바닐라 JavaScript 코드는 독립 실행 예제입니다. 본문에서 배운 개념을 새 데이터로 확인합니다. 다른 예제와 같은 콘솔에 이어 붙이지 말고 새 콘솔 또는 새 .cjs 파일에서 실행하세요.

const byId = new Map([[1, "A"], [2, "B"]]);
const selected = new Set([2, 2, 1]);
console.log(byId.get(2), [...selected].join(","));

실행 결과와 비용

이번 검토에서는 Node.js v24.18.0에서 위 독립 예제를 실행해 다음 출력과 일치하는지 확인했습니다.

B 2,1

시간·공간 복잡도: Map 조회와 Set 추가·포함 확인은 일반적인 해시 기반 구현에서 보통 평균 O(1)입니다. JavaScript 표준은 구현별 상수 시간까지 보장하지 않으며 전체 순회는 O(n)입니다.

직접 풀 문제

selected.add(3) 후 selected.size와 byId.has(3)은 각각 무엇인가요?

풀이와 기대 결과

3과 false입니다. 선택 ID 집합과 작업 저장 Map은 서로 자동 동기화되지 않습니다.

원자료의 다른 학습 순서 (선택)

자료구조 과정 원래 순서의 다음 글: 04 스택의 마지막 항목부터 되돌리기

검증 범위: 위 독립 예제의 출력만 로컬에서 확인했습니다. 이 글은 독립 자료구조 실습입니다. 실제 브라우저 표시와 모든 입력·플랫폼의 실행은 검증하지 않았습니다.

7. 연습 문제에 적용합니다

코딩테스트: 학급 회장 득표수 세기에서는 과일 이름 대신 후보 이름을 키로 두면 됩니다. 투표 하나를 읽을 때마다 그 후보의 득표수를 1 올립니다. 먼저 후보별 표를 모두 센 다음, 가장 큰 득표수를 찾는 단계로 나누어 보세요. 해설을 보기 전에 “이 문제에서 키와 값은 무엇인가?”부터 적어 보면 좋습니다.

이 글에서는 Map·Set을 사용하는 법을 배웠습니다. 내부에서 어떻게 빠르게 찾는지 직접 구현하는 해시 테이블은 중급에서 다룹니다. 지금 당장 해시 함수나 복잡도 표까지 외울 필요는 없습니다.

배열·스택·큐와 언제 구분해서 쓰는지 헷갈린다면 자료구조 선택 가이드의 쉬운 상황별 비교로 돌아가 보세요.

더 알아보기: 객체를 넣을 때는 주의하세요

이 글에서는 문자열 과일 이름을 사용했습니다. 객체는 내용이 같다고 자동으로 하나가 되지 않습니다. 예를 들어 따로 만든 { id: 1 } 객체 두 개는 Set에 두 개로 들어갑니다. 객체가 같은 것을 가리키는지로 구분하기 때문입니다. 상품 객체의 id가 같으면 하나로 처리하고 싶다면 객체 자체 대신 id를 Set에 저장하는 식으로 기준을 정하세요.

일반적인 Map에는 undefined도 값으로 저장할 수 있습니다. 따라서 키가 존재하는지 자체를 알고 싶으면 get 결과 대신 has로 확인하는 편이 분명합니다. 위 개수 세기 예제는 숫자만 저장하므로 이 경우를 걱정하지 않아도 됩니다.

더 알아보기: Map이 항상 더 좋은가요?

작은 배열에서 값을 한 번 찾는 일이라면 배열로 충분할 수 있습니다. 여러 번 같은 이름표로 찾을 때는 Map을 만들어 재사용하는 것이 유용합니다. 다만 Map을 만드는 데도 시간과 추가 공간이 듭니다. JavaScript 규격은 Map을 반드시 해시 테이블로 구현하라고 정하지 않습니다. 지금은 “번호로 찾기, 이름표로 찾기, 중복 없이 모으기”의 용도를 구분하는 데 집중하세요.

참고 자료

• MDN: Map의 저장·조회 메서드
• MDN: Set의 값 추가와 확인
• ECMAScript: Map 규격

안전한 정수 전용 HashSet에서 충돌과 재배치를 확인합니다

내장 Set을 직접 만들며 원리를 확인하려면 먼저 키 범위를 좁혀야 합니다. 아래 NumericHashSet은 안전한 정수만 받으며 문자열·소수·NaN은 거절합니다. 버킷 번호는 ((key % capacity)+capacity) % capacity로 계산하여 음수 키도 0 이상 범위에 둡니다. 용량 4일 때 −1·3·7은 모두 버킷 3에 들어가지만 각 키를 다시 비교하므로 충돌해도 세 값은 구별됩니다. 같은 키를 add하면 false이고 크기는 늘지 않으며, delete도 실제로 지웠을 때만 true입니다.

새 키를 넣은 뒤 적재율이 0.75를 넘게 될 상황이면 버킷 수를 두 배로 늘리고 기존 키의 번호를 새 용량으로 다시 계산합니다. 이전 배열을 그대로 복사하면 조회가 다른 칸을 찾게 됩니다. clear는 현재 용량을 유지한 빈 버킷들과 size=0으로 바꿉니다. values의 순서는 버킷 배치에 따라 바뀌므로 내장 Set의 삽입 순서 계약을 제공하지 않습니다. 내장 Map·Set의 다양한 키·언어 규칙을 대체하는 범용 구현도 아닙니다.

키가 충분히 분산된다는 가정에서 조회·삭제의 기대 비용과 여러 삽입의 분할 상환 비용을 O(1)로 설명할 수 있습니다. 하지만 나머지 해시에서는 특정 수들이 같은 버킷에 몰릴 수 있어 한 연산의 최악은 O(N)입니다. 재배치와 clear는 버킷·원소 수에 비례하는 작업을 하고, 전체 공간은 O(버킷 수+N)입니다. 실행 결과뿐 아니라 저장된 키 수= size, 중복 없음, 모든 키의 올바른 버킷 배치가 확장 후에도 유지되는지 확인하세요.

추가 예제 전체 코드와 실행 방법 펼치기

개념 확인 뒤 직접 실행할 때만 펼쳐 보세요. Node.js 시작 안내를 준비한 뒤 supplement-numeric-hash-set.mjs로 저장합니다.

class NumericHashSet {
  constructor(capacity = 4) {
    if (!Number.isInteger(capacity) || capacity < 1) throw new RangeError('용량은 양의 정수입니다.');
    this.buckets = Array.from({length:capacity}, () => []);
    this.size = 0;
  }
  check(key) {
    if (!Number.isSafeInteger(key)) throw new TypeError('키는 안전한 정수여야 합니다.');
  }
  index(key, capacity = this.buckets.length) {
    return ((key % capacity)+capacity) % capacity;
  }
  has(key) {
    this.check(key);
    return this.buckets[this.index(key)].includes(key);
  }
  #resize(capacity) {
    const next = Array.from({length:capacity}, () => []);
    for (const bucket of this.buckets) {
      for (const key of bucket) next[this.index(key,capacity)].push(key);
    }
    this.buckets = next;
  }
  add(key) {
    this.check(key);
    if (this.has(key)) return false;
    if ((this.size+1)/this.buckets.length > 0.75) this.#resize(this.buckets.length*2);
    this.buckets[this.index(key)].push(key);
    this.size++;
    return true;
  }
  delete(key) {
    this.check(key);
    const bucket = this.buckets[this.index(key)];
    const position = bucket.indexOf(key);
    if (position === -1) return false;
    bucket.splice(position,1);
    this.size--;
    return true;
  }
  clear() {
    this.buckets = Array.from({length:this.buckets.length}, () => []);
    this.size = 0;
  }
  values() { return this.buckets.flat(); }
}

const set = new NumericHashSet(4);
console.log(JSON.stringify([set.add(-1),set.add(-1),set.add(3),set.add(7)]));
console.log(JSON.stringify(set.buckets[3]));
set.add(11); set.delete(3);
console.log(JSON.stringify({values:set.values().sort((a,b)=>a-b),size:set.size,capacity:set.buckets.length}));
set.clear(); set.add(0);
console.log(JSON.stringify({values:set.values(),size:set.size}));

파일이 있는 폴더의 터미널에서 실행합니다.

node supplement-numeric-hash-set.mjs

기대 출력

[true,false,true,true]
[-1,3,7]
{"values":[-1,7,11],"size":3,"capacity":8}
{"values":[0],"size":1}

첨부 test_set.mjs에서 중복·버킷 출력·반환값을 나눠 확인합니다

dev.zip의 dev/test_set.mjs는 이름에 test가 있지만 assert로 통과·실패를 판정하는 자동 테스트가 아닙니다. console.log와 출력용 메서드로 결과를 관찰하는 시연 파일입니다. 아래에서 호출 뒤 남은 상태와 함수가 반환하는 값을 따로 읽어 보세요. 원본은 상대 모듈을 가져오므로 코드 한 조각만 콘솔에 붙이면 독립 실행되지 않습니다.

원본 HashSet은 앞에서 본 숫자 나머지 HashTable에 키를 넣고 값은 항상 -1로 저장합니다. 이 -1은 포함 여부를 나타내기 위한 내부 값이며 사용자가 넣은 원소는 키 1·123·512입니다. add는 get 결과가 null일 때만 삽입하므로 add(1)을 두 번 해도 1이 든 Node는 하나입니다. HashTable 자체의 set과 달리 이 래퍼가 중복을 막는 것입니다.

test_set.mjs의 상태·출력·반환을 함께 읽기

원본 호출	논리 원소와 내부 상태	원본이 출력하는 것
처음 isEmpty()	아직 원소가 없습니다. 모든 버킷 count=0	isEmpty: true
add(1), add(1), add(123), add(512), printAll()	서로 다른 키는 {1,123,512} 세 개입니다. 버킷 1에 1, 2에 512, 3에 123	각 줄에 1, 512, 123, 이어서 isEmpty: false
isContain(1)	원소 1이 남아 있습니다. 상태를 바꾸지 않습니다.	isContain: true
remove(1), printAll(), isEmpty()	원소 {123,512}가 남으므로 아직 비어 있지 않습니다.	512, 123을 각각 출력하고 isEmpty: false
다시 isContain(1)	1은 제거되었고 다른 두 원소는 남아 있습니다.	isContain: false
clear(), printAll(), isEmpty()	모든 버킷의 head=null·count=0입니다.	printAll은 원소를 한 줄도 출력하지 않고 isEmpty: true가 이어집니다.

여기서 printAll()은 배열이나 집합을 반환하지 않습니다. 버킷 번호 0부터 훑으며 각 키를 console.log 합니다. 그래서 원본의 출력은 삽입 순서 1,123,512와 달리 1,512,123입니다. 내장 Set의 삽입 순서와 혼동하지 말고 “중복 없이 세 키가 있는가”와 “어떤 순서로 출력하는가”를 별도로 판단하세요.

같은 집합 개념을 제공해도 메서드 계약은 다릅니다

구현	포함 확인	추가·삭제와 입력 정책
첨부 HashSet	isContain(key)는 boolean	add/remove/clear는 undefined입니다. 양의 정수 키로 시연하며 원본에는 일반 문자열 정책·음수 보정·안전정수 검사가 없습니다.
기존 보강 NumericHashSet	has(key)는 boolean	add/delete는 변경 여부 boolean, clear는 undefined입니다. 안전한 정수만 허용하고 음수를 보정하며 크기·용량 확장을 관리합니다.
JavaScript 내장 Set	has(value)는 boolean	add는 Set 자신, delete는 boolean입니다. 숫자 외에도 문자열·객체 등을 받을 수 있으며 삽입 순서로 순회합니다.

원본에서 add의 반환 undefined를 false로 해석하면 첫 삽입과 중복 삽입을 구별할 수 없습니다. remove도 내부 HashTable의 반환 Node를 밖으로 돌려주지 않으므로 삭제 성공 여부는 isContain이나 버킷 상태로 확인합니다. 원본의 isEmpty는 열 개 버킷의 count를 검사하며 size 속성을 읽는 코드가 아닙니다. 현재 NumericHashSet의 size나 has를 원본 인스턴스에 그대로 적용하지 않습니다.

자동 테스트로 바꾸려면 assert 대상을 “1을 두 번 넣어도 버킷 1의 count=1”, “삭제 뒤 isContain(1)=false”, “다른 두 키는 유지”, “clear 뒤 모든 count=0”으로 나눕니다. clear 뒤 같은 키를 다시 넣는 재사용, 없는 키 삭제, 같은 버킷에 몰리는 여러 키는 원본 시연 밖의 추가 확인입니다. 버킷에 충돌이 몰리면 add·포함 확인·remove도 탐색이 길어질 수 있습니다.

자기 확인: add(1)의 반환 undefined와 isContain(1)의 false는 같은 뜻인가요?

아닙니다. undefined는 원본 add에 명시적인 반환값이 없다는 뜻입니다. false는 isContain이 키가 없다고 판정한 결과입니다. 첫 add(1) 뒤에는 반환은 undefined여도 isContain(1)은 true입니다.