Today I Learned

[Javascipt] Map과 Set

Seo Ji Won 2024. 8. 13. 19:43

1. Map

Map은 키-값 쌍을 저장하는 컬렉션이다.

  • 키로 모든 데이터 타입 사용 가능: 객체에서는 키로 문자열이나 심볼만 사용할 수 있지만, Map에서는 키로 숫자, 객체, 함수 등 다양한 데이터 타입을 사용할 수 있다.
  • 순서 보장: Map은 삽입 순서를 기억하고, 순서대로 데이터를 순회할 수 있다.
  • Iterable: Map은 기본적으로 for...of나 forEach로 순회할 수 있다.

 

주요 메서드

  • set(key, value): 새로운 키-값 쌍을 추가하거나 기존 값을 업데이트한다.
  • get(key): 지정된 키에 대한 값을 반환한다.
  • has(key): 지정된 키가 존재하는지 여부를 확인하여 true / false값을 반환한다.
  • delete(key): 지정된 키-값 쌍을 삭제한다.
  • clear(): 모든 키-값 쌍을 삭제한다.
  • size: Map의 요소 개수를 반환한다.
  • keys(), values(), entries(): 각각 키, 값, 키-값 쌍을 이터레이터로 반환한다.

예시

const newMap = new Map(array); //array로 새로운 map 생성

newMap.has(value) ? 1 : 0 //newMap이라는 map에 value라는 키값이 있는지 확인하여 true/false로 반환
newMap.get(value) // value라는 키의 값이 있는지 확인하여 true/false로 반환

 

2. Set

Set은 고유한 값을 저장하는 컬렉션이다. 중복된 값을 허용하지 않는다는 특징이 있다. 

  • 중복된 값을 저장할 수 없다.
  • 순서 보장: Set은 삽입된 순서대로 값을 순회할 수 있다.
  • Iterable: Set은 for...of나 forEach를 사용하여 순회할 수 있다.

주요 메서드

  • add(value): 값을 추가하는 메서드이다. 값이 이미 존재하면 아무 것도 하지 않는다.
  • has(value): 값이 존재하는지 여부를 확인한다.
  • delete(value): 특정 값을 삭제한다.
  • clear(): 모든 값을 삭제한다.
  • size: Set의 요소 개수를 반환한다.
  • values(): 모든 값을 이터레이터로 반환한다.

예시

배열을 set으로 만들어 중복을 제거할때 쓸 수 있다.
const array = [1, 1, 2, 3, 4, 5];
const newArray = [...new Set(array)];
// newArray = [1, 2, 3, 4, 5]

 

Map과 Set의 차이점

     
  Map Set
저장 방식 키-값 쌍 (key-value pairs) 고유한 값만 저장 (unique values)
모든 데이터 타입 가능 (문자열, 객체 등) 키와 값이 동일 (값만 저장)
중복 여부 키가 중복될 수 없으며, 값을 업데이트 가능 중복된 값은 저장되지 않음
순서 보장 삽입 순서 보장 삽입 순서 보장
사용 예시 키와 값을 쌍으로 저장해야 하는 경우 고유한 값들을 모으거나 존재 여부를 확인하는 경우
주요 메서드 set(), get(), has(), delete(), clear() add(), has(), delete(), clear()

 

언제 Map을 사용하고, 언제 Set을 사용할까?

 

Map을 사용해야 하는 경우

  • 데이터가 키-값 쌍으로 연결된 경우
  • 키로 문자열 외 다른 데이터 타입을 사용해야 하는 경우
  • 삽입 순서를 유지하고 순회해야 하는 경우

Set을 사용해야 하는 경우

  • 값이 고유해야 할 때 (예: 중복을 제거해야 하는 경우)
  • 값의 존재 여부를 빠르게 확인해야 하는 경우
  • 삽입 순서를 유지해야 하는 경우