[JavaScript] 자료구조 Map이란 무엇인가?

오늘은 JavaScript로 내장 자료구조인 Map을 다뤄보기로 하겠습니다.

JavaScript의 Map 다루기는 총 3 단계를 통해서 알아볼 계획입니다. 오늘은 바로 Map을 다루기를 알아보기 전에 Map 자료구조에 대해 먼저 알아보고자 합니다. 개발자라면 Map이라는 자료구조를 자주 쉽게 활용하곤 하지만, 정작 정확하게 모르고 활용하기도 하기에, 이번 기회에 정확하게 알아보고자 합니다.

 

 

Map 이란?

JavaScript로 Map을 활용하기에 앞서, 먼저 Map이라는 자료구조에 대해 알아볼 필요가 있습니다.

 

 

Map은 Key-Value의 쌍으로 이루어진 자료구조로 Key를 통해 데이터를 쉽게 접근할 수 있는 자료구조입니다.

일반적으로 배열(Array)은 Index-Value의 쌍으로 이루어져 있어 Index를 통해 데이터를 쉽게 접근할 수 있어 정말 편하게 활용되는 자료구조이지만, Map은 Index라는 숫자뿐만 아니라 Key라는 그 어떤 것으로도 데이터를 쉽게 접근할 수 있게 구현되어져 있습니다.

 

 

 

 

Map 자료구조의 정의

Map 자료구조는 아래의 구조를 취하고 있습니다. Key에 따라 Value를 찾을 수 있는 연결 구조로 이루어져 있습니다.

 

 

º Map은 Key와 Value의 쌍으로 이루어진 자료구조이다.

 

 

Map은 위처럼 탐색할 수 있는 Key와 그 Key를 통해 바로 찾을 수 있는 Value로 구성되어있습니다.

 

 

º Map의 Key는 중복을 허용하지 않는다.

 

 

 

위와 같이 Key가 a인 두개의 데이터는 입력되어질 수 없습니다. 즉, Map의 Key는 유일하게 사용되어져야합니다.

 

 

 

 

Map 자료구조의 특징

 

º 데이터의 접근 속도가 빠르다.

 

API	시간복잡도
검색	O(1)
삽입	O(1)
제거	O(1)
키 존재 확인	O(1)

 

위와 같이 데이터에 접근 속도가 엄청 빠른 것을 알 수 있습니다.

 

 

 

 

º Map 자료구조는 iterator 특징을 갖는다.

 

iterator는 배열이나 유사한 자료구조의 내부 요소를 순회하는 객체입니다. 즉, Map 자료구조는 순회할 수 있는 객체적 특징을 갖고 있다는 말과 같습니다.

 

 

JavaScript에서 iterator는 for문을 활용하여 순회할 수 있습니다. iterator의 순회 방법은 다른 포스팅으로 더 자세히 알아보도록 하며, 위에서 나온 Map의 예를 코드를 통해 for문으로 순회하는 예제로 알아보고 가겠습니다.

 

 

const map = new Map();

map.set('a', 'apple');
map.set('b', 'banana');
map.set('c', 'carrot');
map.set('d', 'danger');

for(let key of map.keys()) {
   console.log(key);
}
// 'a'
// 'b'
// 'c'
// 'd'

for(let value of map.values()) {
   console.log(value);
}
// 'apple'
// 'banana'
// 'carrot'
// 'danger'

for(let entry of map) {
   console.log(entry);
}
// ['a', 'apple']
// ['b', 'banana']
// ['c', 'carrot']
// ['d', 'danger']

 

 

위와 같이 JavaScript에서 Map 자료구조는 총 3가지 형태로 for문을 통해 순회할 수 있습니다.

 

 

 

 

º Map 자료구조는 길이를 구하기 쉽다.

 

JavaScript를 사용하는 개발자라면 Array와 Map을 혼용해서 쓰기도 할 것이라 생각합니다. JavaScript에서는 Array의 Key를 숫자인 Index만을 쓸 수 있는 것이 아니라 문자열 등 다양하게 활용할 수 있기 때문입니다. 하지만 Map과 Index를 활용하지 않은 Array의 가장 큰 차이점은 길이를 가져오는 방법입니다.

 

 

Map의 길이를 가져오는 방법은 다음과 같습니다.

 

map.size

 

map 변수의 size 속성을 통해 바로 접근하여 가져올 수 있습니다.

 

하지만 Index를 활용하지 않은 Array는 기본 배열의 길이를 가져올 수 있는 array.length를 활용하여 배열의 길이를 가져올 수 있지 않고, 일일히 접근하여 개수를 확인하는 방법이 최선입니다.

 

 

 

 

Map 자료구조 알아보며...

 

먼저 Array와 Map의 기본적인 공통점과 차이점에 대해 학습할 수 있는 좋은 기회였습니다.

 

Array의 기본은 숫자 Index를 통해 값에 의한 접근이 가능한 자료구조로 활용하는 것이 좋다는 생각이 들며, Index가 아닌 값을 Key로 활용하고자 한다면 Map 자료구조를 활용하는 것이 더 효율적이고 편리하다는 생각이 들었습니다.

 

하지만 상황에 따라 어떤 자료구조를 활용하는 것은 개발자의 마음이며, 더 효율적인 자료구조가 어떤 것인지 판단하여 활용하는 것이 유연한 개발자라 생각합니다.

 

 

그럼 이것으로 Map이란 무엇인지 학습을 마치며, 다음으로 JavaScript로 Map 다루는 방법에 대해 알아보겠습니다.