[JavaScript] Object(객체) 대신에 왜 Map을 써야할까?

모던 자바 스크립트에서는 기존의 Object(객체)이외에 Map(맵)과 Set(세트)라는 컬렉션이 추가됐다.

 

하지만 아직도 대부분의 객체 형태로 많이쓰고 있던 와중 Map이라는 것을 알게되었고, 언제 써야하는지에 대해 고민하게 되었다. MDN에서는 Map의 장점과 어떤 경우에 써야하는지를 서술하고 있다.

 

1. Map 의 장점
   - 객체의 Key는 strings지만, Map의 Key는 모든 값을 가질 수 있다.
   - 객체는 수동으로 크기를 추적해야 하지만, Map은 크기를 쉽게 알 수 있다.
   - Map은 삽입된 순서대로 반복된다.
   - 객체에는 prototype 이 있어 Map에 기본 키들이 있다.
   
   
2. 객체 또는 Map을 결정하는 사항
   - Map : 실행 시 까지 키를 알 수 없고, 모든 키가 동일한 type이며 모든 값들이 동일한 type 일 때
   - 객체 : 각 개별 요소에 대해 적용해야 하는 로직이 있을 때 

 

이러한 장점과 고려사항을 볼 때 가장 알맞은 예시를 들어준 블로그를 인용하여 첨부한다.

데이터 변경이 잦을 경우 Map을 사용하자

대표적인 예로 쇼핑몰 등의 검색 사이트에서 필터링이 있다.
실제로 개발을 안해봤어도 필터링기능이 뭔지는 다들 알 것이다.

네이버 쇼핑을 예시로 한번 알아보자.

---

키보드를 찾고자 하는 모습이다.
하단을 보면 카테고리, 제조사, 키 방식 등등 많은 필터링 기능을 제공하는 것이 확인된다.

객체로 필터링 기능 구현

네이버 쇼핑의 검색 정보가 아래와 같다고 가정해보자.

const data = [
  {
    이름 : 'SPA-NKG1CU',
    카테고리 : '유선키보드',
    제조사 : '삼성전자',
    키방식 : '기계식',
    접점방식 : '청축',
  },
  {
    이름 : 'GK898B',
    카테고리 : '무선키보드',
    제조사 : '한성컴퓨터',
    키방식 : '무접점(광축)',
    접점방식 : '광축(클릭)',
  },
]

 

필터링할 내용을 저장 할 빈 객체를 하나 만든다.
그리고 '필터링 목록 추가', '필터링 목록 삭제', '필터링 목록 초기화' 기능을 만들어준다.

// filters 빈 객체 생성
let filters = {};

// 필터링 목록 추가
const addFilters = (filters, key, value) => {
  filters[key] = value;
};

// 필터링 목록 삭제
const removeFilters = (filters, key) => {
  delete filters[key];
};

// 필터링 목록 초기화
const clearFilters = (filters) => {
  filters = {};
  return filters;
}

 

완벽한데요! 객체를 써도 문제 없겠어요. 🤗

라고 생각했다면 모던 자바 스크립트에는 맞지 않다.
물론 기능 자체는 잘 돌아가지만 이상한 부분이 있다.

필터링 목록을 조작하는 추가, 삭제, 전체삭제 3가지 기능이 존재하는데 그 동작 방법이 모두 다르다는 것이다.

이게 무슨 말일까? 좀 더 자세히 알아보자.

 

• 추가 : [key]를 이용
• 삭제 : delete를 이용
• 전체삭제 : 변수 재할당 (new Object())를 이용

이제 좀 보이는가?
이는 예측 불가하고 명확하지 않은 코드를 야기시킨다.

우리는 단순히 돌아가는 코드를 찍어내는게 중요한 게 아니다.
최대한 예측 가능한 코드를 만들어 개발 속도를 높이고, 읽는 시간을 줄여야 한다.

Map에서는 이를 보완하기 위해 전용 메서드가 존재하는 등 예측이 가능하도록 했다.
한번 Map을 이용해서 다시 개발해보자.

 

---

Map으로 필터링 구현

이번엔 Map으로 filters를 선언해보자.
Map은 new Map();으로 선언 할 수 있다.

let filters = new Map();

 

---

그리고 데이터를 추가하려면 set() 메서드를 사용한다.
인자값은 두 개가 전달되며, 순서대로 key, value이다.

filters.set('이름', 'SPA-NKG1CU');

 

---

체이닝을 사용하면 새 Map을 생성하고 바로 데이터를 추가할 수 있다.

let filters = new Map()
	.set('이름', 'SPA-NKG1CU')
	.set('카테고리', '유선키보드')
	.set('제조사', '삼성전자')
	.set('키방식', '기계식')
	.set('접점방식', '청축');

 

또는 배열을 통해 작성 또한 가능하다.

let filters = new Map(
	[
      ['이름', 'SPA-NKG1CU'],
      ['카테고리', '유선키보드'],
      ['제조사', '삼성전자'],
      ['키방식', '기계식'],
      ['접점방식', '청축'],
    ]
);

 

---

Map의 데이터를 key로 가져오려면 get() 메서드를 사용하면 된다.

filters.get('이름');

 

---

Map의 데이터를 제거하려면 delete() 메서드를 사용한다.

filters.delete('이름');
filters.get('이름');

 

---

마지막으로, Map의 모든 데이터를 삭제하려면 clear() 메서드를 사용한다.

filters.clear();
filters.get('이름');

---

자, 그럼 이제 위에서 만들었던 필터링 목록을 조작하는 추가, 삭제, 전체삭제 기능을 Map으로 만들어보자.

const filters = new Map();

// 필터링 목록 추가
const addFilters = (filters, key, value) => {
  filters.set(key,value);
};

// 필터링 목록 삭제
const removeFilters = (filters, key) => {
  filters.delete(key);
};

// 필터링 목록 초기화
const clearFilters = (filters) => {
  filters.clear();
}

 

출처 : https://velog.io/@himprover/이제는-모던-자바스크립트를-알아야지-객체-Map-Set-골라쓰기