[JavaScript]Map 객체 정렬하는 방법

Map이란?

Map은 Key-Value 형식의 컬렉션입니다.

let mapObj = new Map([['key', 'Value1'], [2, 2], [new Date(), 'Value3']]);

for(let key of mapObj.keys()) {
   console.log(key);
   // key, 2, 3
}

객체와 다르게 모든 타입을 키로 사용할 수 있으며, 객체에서 사용할 수 없는 유용한 기능들이 많습니다.

 

이번 포스팅에서는 Map 컬렉션 정렬 방법을 소개합니다.

 

목차

1. Map 객체와 일반 객체(Object) 차이점
2. Map 객체 정렬하는 방법

---

Map 객체와 일반 객체(Object) 비교

Map 객체는 일반 객체와 몇 가지 차이점을 제외하고는 일반 객체와 유사한 데이터 구조를 갖습니다.

 

1. get(), set()

Map 객체는 키와 매핑되는 값을 가져오기 위해서 get() 함수를 사용하며, 항목을 추가하거나 값을 수정하는 경우 set() 함수를 사용합니다.

일반 객체는 대괄호 표기법을 사용하여 키와 매핑되는 값을 가져오며, 항목을 추가하거나 값을 수정합니다.

// 일반 객체
let normalObj = {};
// 값 설정
normalObj['A'] = '일반 객체 Value';
// 값 가져오기
console.log(normalObj['A']); // 일반 객체 Value

// Map 객체
let mapObj = new Map();
// 값 설정
mapObj.set('A', 'Map 객체 Value');
// 값 가져오기
console.log(mapObj.get('A')); // Map 객체 Value

 

2. 키의 데이터 타입

일반 객체는 문자열 또는 기호만 키로 사용할 수 있지만, Map 객체는 모든 타입을 키로 사용할 수 있습니다.

 

다음과 같이 일반 객체에서 키를 Date 타입으로 설정하면 SyntaxError가 발생합니다.

let normalObj = {
  new Date(): 'value'
};

하지만, Map 객체에서는 정상적으로 동작합니다.

let mapObj = new Map();
mapObj.set(new Date(), 'Value');

 

3. 삽입 순서

Map 객체는 "삽입 순서"를 기억하고 있으므로 배열처럼 항목을 순서대로 추가됩니다. 하지만, 일반 객체는 삽입 순서를 보장하지 않습니다.

 

4. size

Map 객체는 size 속성을 사용하여 항목의 개수를 확인할 수 있지만, 일반 객체는 항목의 개수를 가져오는 방법을 직접 구현하거나 외부 라이브러리를 사용해야 합니다.

let mapObj = new Map();
mapObj.set('A', 'Value A');
mapObj.set('B', 'Value B');
mapObj.set('C', 'Value C');

console.log(mapObj.size)

 

5. 반복 가능(iterable)

일반 객체를 반복하려면 키를 검색해야 하는 문제가 있지만, Map 객체는 배열처럼 반복 가능합니다.

---

Map 객체 정렬하는 방법

Map 객체는 정렬 기능을 지원하지 않지만, 다음 과정을 거쳐서 정렬할 수 있습니다.

1. 스프레드 연산자(...)를 사용하여 Map 객체를 배열로 변환합니다.
2. 배열의 sort() 함수로 정렬합니다.
3. 정렬된 배열을 Map 객체로 변환합니다.

다음은 Map 객체를 정렬하는 예제입니다.

let mapObj = new Map();
mapObj.set('A', 1);
mapObj.set('E', 5);
mapObj.set('B', 2);
mapObj.set('D', 4);
mapObj.set('C', 3);

console.log(mapObj);
// Map(5) {'A' => 1, 'E' => 5, 'B' => 2, 'D' => 4, 'C' => 3}

// 순서 1. Map 객체를 배열로 변환
let keyAscArray = [...mapObj];
let keyDescArray = [...mapObj];

// 순서 2. 배열의 sort() 함수로 정렬합니다.
// 순서 2-1. Key 오름차순으로 정렬 
keyAscArray.sort();

// 순서 2-2. Key 내림차순으로 정렬
// 오름차순으로 정렬된 배열을 reverse() 함수로 뒤집어서 내림차순으로 만듦
keyDescArray.sort().reverse();

// 순서 3. 정렬한 배열을 Map 객체로 변환
let keyAscMap = new Map(keyAscArray);
let keyDescMap = new Map(keyDescArray);

console.log(keyAscMap);
// Map(5) {'A' => 1, 'B' => 2, 'C' => 3, 'D' => 4, 'E' => 5}

console.log(keyDescMap);
// Map(5) {'E' => 5, 'D' => 4, 'C' => 3, 'B' => 2, 'A' => 1}