[JS ES6]-[23] Map, Set 핵심만 이해하기

 

안녕하세요.

이번 글에서는 자바스크립트에서의  Map, Set 핵심만 알려드리겠습니다.

 

1. Map

1.1 사용이유

객체처럼 key, value형태로 자료를 저장하는 자료형입니다.

 

 

근데 객체는 key 값이 문자열과, Symbol만 가능하지만,

Map자료형은 어떠한 타입이어도 상관없습니다.

어떠한 값도 넣을 수 있기에, 자료의 연관성이 클 때 쓰입니다.

 

 

1.2 사용방법

const human = new Map();

human.set('name', 'kim');
human.set([1,2], 30);

console.log(human)  //{'name' => 'kim', Array(2) => 30}

위처럼 key값으로 배열도 들어갈 수 있습니다.

객체처럼 key값이 자료의 이름보다는,

배열 [1, 2]가 30과 연관되어 있다는 의미가 큽니다.

 

 

//자료 직접 넣기
const human = new Map([
  ['name', 20],
  [[1,2], 30]
])

//자료 가져오기
human.get('name');

//자료 삭제
human.delete('name');

//자료 갯수
human.size;

//반복문 돌리기
for (let key of human.keys() ){
  console.log(key);
}

 

 

1.3 사용예시

그럼 실제로 Map을 언제 써야 할까요?

보통 키-값 이 자주 추가되거나 삭제되는 경우 많이 쓰입니다.

 

 

예를 들어 쿠팡에서 상품을 쉽게 정렬할 수 있는 필터 코드를 짜보겠습니다.

우리가 흔히 사용하는 객체로 필터를 만들어볼게요

let filters = {};

// 값 추가
function add_filters(filters, key, value) {
  filters[key] = value;
}

// 값 삭제
function delete_filters(filters, key) {
  delete filters[key];
}

// 필터 초기화
function clear_filters(filters) {
  filters = {};
  return filters;
}

 

 

좋은 코드지만, 단점이 존재합니다.

1. 필터를 조작하는 추가, 삭제, 초기화 코드가 방법이 많이 다릅니다.
   • 추가 ⇒ filters [key]
   • 삭제 ⇒ delete
   • 초기화 ⇒ new Object
2. 그리고 객체 반복문을 돌릴 때 for of를 사용하면
   • 상속받은 값을 빼기 위해 hasOwnProperty을 사용해야 합니다.

 

 

위의 단점들을 극복하려면 Map을 사용하면 됩니다.

let filters = new Map();

//값 추가
function add_filters(filters, key, value) {
  filters.set(key, value);
}

//값 삭제
function delete_filters(filters, key) {
  filters.delete(key);
}

//모든 키-값 쌍 제거
function clear_filters(filters) {
  filters.clear();
}

 

 

맵은 메소드 이름들이 예측 가능하여 동작이 명확하고,

객체보다 반복하기 쉬워 데이터를 조작하기 좋습니다.

 

 

2. Set

2.1 사용이유

배열처럼 자료를 일렬로 저장할 수 있는 자료형입니다.

 

 

근데 Set은 중복자료를 허용하지 않아,

중복데이터를 방지할 때 쓰입니다.

 

 

2.2 사용방법

const name = new Set([ 'kim' , 'john', 'min', 'kim' ]);

console.log(name);  //Set(3) {'kim', 'john', 'min'}

kim이 2개지만 Set은 중복데이터를 허용하지 않기 때문에 하나만 출력됐습니다.

 

 

//자료 추가
name.add('sang');

//자료 있는지 확인
name.has('kim');

//자료 갯수
name.size;

//반복문 돌리기
for (let key of name){
  console.log(key);
}

 

 

2.3 사용예시

원래 배열에서 중복값을 없애려면 filter나 ForEach 등,

복잡하게 중복제거를 했어야 했습니다.

그러나 Set은 간단하게 중복제거를 할 수 있습니다.

const name = [ 'kim' , 'john', 'min', 'kim' ];
const name2 = new Set(name); //배열을 Set으로 변경
const deduplication_name = = [...name2]  //Set을 배열로 변경

 

 

3. 결론

Map과 Set은 잘 안 쓰입니다.

외우지 마시고, 필요한 일이 생기면 찾아보세요!