JavaScript의 Map과 Set 완벽 정리(1편) - Object, Array와의 비교

JavaScript에는 다양한 데이터 구조가 존재하지만, 그중에서도 Map과 Set은 고유한 특성을 가지고 있는 중요한 컬렉션(Collection) 객체입니다. 특히 Object와 Array와 비교하면 각각의 장점과 단점이 뚜렷하게 드러납니다.

이 글에서는 Map과 Set의 개념, 특징, 사용 방법, 주요 메서드뿐만 아니라 Object와 Array와의 차이점까지 깊이 있게 살펴보겠습니다.

 

 

---

 

1. Map 객체란?

1.1 개념 및 특징

Map은 키-값 쌍을 저장하는 컬렉션 객체입니다. Object와 비슷해 보이지만, 몇 가지 중요한 차이점이 있습니다.

• 키로 모든 유형의 값(객체, 원시 값 등)을 사용할 수 있습니다.
• 입력 순서를 유지합니다. (Object는 키 순서를 보장하지 않음)
• 키의 중복을 허용하지 않습니다.
• 성능적으로 Object보다 빠른 경우가 많습니다. (특히 대량의 데이터 처리 시)

 

1.2 Map과 Object 비교

특징	Map	Object
키 타입	모든 유형 사용 가능	문자열 또는 심볼만 가능
키 순서	입력 순서 유지	순서를 보장하지 않음
성능	대량 데이터 처리 시 우수	속성이 적을 때 유리
기본 메서드	다양한 유틸리티 제공	기본적으로 제공하는 메서드 부족

 

1.3 Map의 주요 메서드

메서드	설명
new Map()	새로운 Map 객체를 생성합니다.
set(key, value)	특정 키와 값을 추가합니다.
get(key)	특정 키에 대한 값을 반환합니다.
has(key)	특정 키가 존재하는지 확인합니다.
delete(key)	특정 키를 삭제합니다.
clear()	모든 요소를 삭제합니다.
size	요소의 개수를 반환합니다.

 

1.4 Map 사용 예제

// Map 객체 생성
let myMap = new Map();

// set()을 이용하여 값 추가
myMap.set("name", "John");
myMap.set(1, "Number One");
myMap.set(true, "Boolean True");

console.log(myMap.get("name")); // John
console.log(myMap.get(1)); // Number One
console.log(myMap.get(true)); // Boolean True

console.log(myMap.has("name")); // true
console.log(myMap.size); // 3

myMap.delete(1);
console.log(myMap.has(1)); // false

myMap.clear();
console.log(myMap.size); // 0

 

 

 

---

 

2. Set 객체란?

2.1 개념 및 특징

Set은 중복 없는 값의 집합을 저장하는 객체입니다.

• 모든 값이 유일해야 합니다.
• 입력 순서를 유지합니다.
• 키-값 쌍이 아니라 값만 저장합니다.

 

2.2 Set과 Array 비교

특징	Set	Array
중복 허용	불가능	가능
검색 속도	빠름	느림 (indexOf 사용 시)
크기 확인	.size 사용	.length 사용
순회 방법	forEach, for...of	forEach, map, for...of

 

2.3 Set의 주요 메서드

메서드	설명
new Set()	새로운 Set 객체를 생성합니다.
add(value)	값을 추가합니다.
has(value)	특정 값이 존재하는지 확인합니다.
delete(value)	특정 값을 삭제합니다.
clear()	모든 요소를 삭제합니다.
size	요소의 개수를 반환합니다.

 

2.4 Set 사용 예제

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

 

 

---

 

3. Map과 Set의 활용 예시

3.1 배열에서 중복 제거 (Set 활용)

배열에서 중복된 값을 제거하는 가장 쉬운 방법은 Set을 사용하는 것입니다.

let names = ["Alice", "Bob", "Alice", "Charlie", "Bob"];
let uniqueNames = [...new Set(names)];
console.log(uniqueNames); // ["Alice", "Bob", "Charlie"]

 

3.2 사용자 데이터를 저장하는 Map 활용

사용자 정보를 저장할 때 Object를 사용할 수도 있지만, Map을 사용하면 키 타입의 유연성과 성능 면에서 장점이 있습니다.

let userMap = new Map();
userMap.set(101, { name: "Alice", age: 25 });
userMap.set(102, { name: "Bob", age: 30 });

console.log(userMap.get(101)); // { name: "Alice", age: 25 }

 

3.3 방문한 페이지 기록 (Set 활용)

Set을 활용하면 사용자가 방문한 페이지 목록을 저장하고 중복을 방지할 수 있습니다.

let visitedPages = new Set();
visitedPages.add("/home");
visitedPages.add("/about");
visitedPages.add("/home"); // 중복 추가 안 됨

console.log([...visitedPages]); // ["/home", "/about"]

 

3.4 키 개수가 많은 데이터를 Map으로 관리

일반 객체(Object)는 속성이 많아지면 성능이 저하될 수 있지만, Map은 대량 데이터를 효율적으로 관리합니다.

let productInventory = new Map();
productInventory.set("apple", 50);
productInventory.set("banana", 30);
productInventory.set("orange", 20);

console.log(productInventory.get("banana")); // 30

 

 

 

---

 

JavaScript의 Map과 Set은 보다 효율적인 데이터 저장과 관리가 필요한 경우 매우 유용하게 활용될 수 있습니다.

 

Map은 키-값 쌍을 다룰 때 강력한 기능을 제공하며, Object보다 더 유연한 키 타입을 가질 수 있습니다.
Set은 중복을 허용하지 않는 유일한 값들의 집합을 다룰 때 매우 유용합니다.

 

 

 

Map과 Set의 심화 내용을 보고 싶으시면 아래의 2편 포스팅을 확인 해주세요!

 

https://gyeonghwan.tistory.com/entry/JavaScript%EC%9D%98-Map%EA%B3%BC-Set-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC2%ED%8E%B8-WeakMap-WeakSet-JSON-%EB%B3%80%ED%99%98-Symbol-%EC%84%B1%EB%8A%A5-%EB%B9%84%EA%B5%90