JavaScript의 Map과 Set

Map

Map은 키-값 쌍을 저장하는 자료구조이다. 키와 값을 연결하여 데이터를 저장하고 조회할 수 있다. 각 키는 유일해야 하며, 순서가 보장된다.

Map은 키가 있는 데이터를 저장한다는 점에서 객체와 유사하다. 다만, 다음의 차이점이 있다.

• 키의 다양한 데이터 타입
  Map은 키로 객체 뿐만 아니라 원시 데이터 타입(문자열, 숫자, 불리언 등)과 심지어 함수 등을 사용할 수 있다. 객체의 경우 객체의 내용이 아니라 참조를 기준으로 동등성이 판단되므로, 동일한 내용을 가진 다른 객체는 동등하지 않다.

• 키의 순서 보장
  Map은 요소들이 삽입된 순서를 기억하고 있다. 따라서 반복문을 사용하여 Map의 키-값 쌍을 순차적으로 접근할 수 있다. 이는 객체의 프로퍼티 순서가 보장되지 않는 것과 대조적이다.

• 키의 중복 허용하지 않음
  한 Map 객체 안에서는 같은 키를 여러 번 사용할 수 없다. 각 키는 유일해야 한다. 중복된 키를 사용하면 나중에 추가된 값이 덮어쓰게 된다.

• 메소드와 속성
  Map 객체는 다음과 같은 주요 메소드와 속성을 제공한다.

Map에는 다음과 같은 주요 메서드와 프로퍼티가 있다.

• new Map()
  새로운 맵을 만든다.
• .set(key, value)
  key를 이용해 value를 저장한다.
• .get(key)
  key에 해당하는 값을 반환한다. key가 존재하지 않으면 undefined를 반환한다.
• .has(key)
  key가 존재하면 true, 존재하지 않으면 false를 반환한다.
• .delete(key)
  key에 해당하는 값을 삭제한다.
• .clear()
  모든 요소를 제거한다.
• .size
  요소의 개수를 반환한다.
• .keys()
  각 요소의 키를 모은 iterable 객체를 반환한다.
• .values()
  각 요소의 값을 모은 iterable 반환한다.
• .entries()
  요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환한다. 이 이터러블 객체는 for..of반복문의 기초로 쓰인다.

// Map 생성
// ts에서 Map의 타입을 입힐 때는, 제너릭형태로 <> 안에 첫 번째는 key, 두 번째는 value의 타입을 넣어준다.
const myMap: Map<string | number | object, string | number> = new Map();
const obj = { key: 'object' };

// 키-값 쌍 추가
myMap.set('name', 'John');
myMap.set(1, 35);
myMap.set(obj, "this is object!");

// 값 조회
console.log(myMap.get("name")); 		// "John"
console.log(myMap.get(1));       		// 35
console.log(myMap.get(obj));			// "this object!'

// 키 존재 여부 확인
console.log(myMap.has("name"));  		// true

// Map 크기 확인
console.log(myMap.size);        		// 3

대부분의 경우에는 Map의 키를 일관된 타입으로 사용하는 것이 더 명확하고 편리하다. 특히 객체와 같은 참조 타입을 키로 사용할 때, 객체의 동등성 비교에 주의해야 할 수 있다. 동일한 내용을 가지고 있더라도 서로 다른 객체는 동등하지 않게 될 수 있다.

Set

Set은 중복되지 않는 값을 저장하는 데이터 구조로, ES6(ECMAScript 2015)에서 도입되었다. Set은 고유한 값들의 컬렉션을 관리할 때 사용되며, Map 과 달리 key 를 이용해 저장하지 않고, 오로지 value만 저장된다.

주요 메서드는 다음과 같다.

• new Set(iterable) – 새로운 Set을 만든다. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어준다.
• .add(value)
  값을 추가하고 Set 자신을 반환한다.
• .delete(value)
  값을 제거한다. 호출 시점에 제거에 성공하면 true, 아니면 false를 반환한다.
• .has(value)
  Set 내에 값이 존재하면 true, 아니면 false를 반환한다.
• .clear()
  모든 요소를 제거한다.
• set.size
  요소의 개수를 반환한다.

const arr: Array<number> = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
const mySet: Set<number> = new Set(arr);

console.log([...mySet]); 	//  spread 연산자를 통해 Set객체를 다시 배열로 만듬

mySet.add(6);
mySet.add(7);
mySet.add(5); 				// 중복된 값은 무시됨

console.log(mySet);			// [1, 2, 3, 4, 5, 6, 7]

Set은 데이터 컬렉션에서 중복된 값을 피하고 싶거나, 고유한 값의 집합을 key없이 관리하고 싶을 때 사용한다. 각각 알맞는 상황에 Set과 Map을 구현하여 코딩하면 더욱 효율적인 코드를 작성할 수 있을 것이다.