[JavaScript] ES6 Data Structure: Map

ECMAScript 2015에서 새롭게 추가된 데이터 구조 Map에 대해

JavaScript ECMAScript 2015에서 새롭게 추가된 기능이 많지만, 새로운 데이터 구조에 대해서는 관심이 부족하다. 추가된 데이터 구조는 Map, WeakMap, Set, WeakSet이며, 사용하는 Npm module의 소스 코드를 살펴보다 발견하게 되어 자세히 알아보게 되었다. 일반적인 용도라면 기존의 데이터 구조만으로도 크게 불편함을 못 느꼈으나, 때마침 MDN에서 Map Object의 번역을 한 김에 그 내용을 위주로 다시 한번 정리해보겠다.


ECMAScript Specification에서는 Map을 다음과 같이 정의하고 있다.

Map objects are collections of key/value pairs where both the keys and values may be arbitrary ECMAScript language values.

정의를 보고 알 수 있겠지만, 기본적으로 Map은 통상적으로 사용하는 JavaScript의 Object와 유사하다. 가장 큰 차이라고 한다면 Key와 Value에 어떠한 타입의 값도 사용할 수 있다는 점이다.

데이터 Collection으로 새롭게 추가된 Map의 기본적인 사용 방법과 기존 Object와의 차이점을 MDN 문서에 기초해서 알아보도록 하겠다.

Map 만들기

Map은 기존의 Object Literal (var obj = {})과 같은 방법으로 만드는 것이 아니라, new 키워드를 이용하여 새로운 인스턴스를 생성하는 방식으로 만들 수 있다. 또한 데이터의 Collection으로써 갖추어야 할 기본적인 동작인 데이터 저장과 불러오기은 getset Method를 통해서 제공하고 있다.

Map 생성과 기본 Operation

Map과 Object의 비교

Object는 값을 키로 저장하고 불러올 수 있다는 점, 키를 삭제할 수 있다는 점, 그리고 어떠한 값이 저장되어있는지 쉽게 확인할 수 있다는 점에서 Map과 유사하다. 이러한 이유때문에(그리고 Built-in된 대체제가 없었던 이유로), 역사적으로 Object를 데이터 Collection으로 사용해왔다. 그러나 특정 상황에서는 Map을 사용하는 것이 Object를 사용하는 것보다 더 적절하다.

  • Object는 기본적으로 프로토타입을 가지고 있다. 그렇기 때문에 생성된 Object에는 의도치 않은 Default Key가 존재하게 된다. 이 문제는 ES5 이래로, var obj = Object.create(null)과 같은 방법으로 피할 수 있지만, 실제로 거의 사용되지 않는 패턴이다. 하지만 Map은 set Method를 통해서 저장하거나, 인스턴스 생성 단계에서 초기 데이터를 전달하지 않는 이상 어떠한 Default Key도 존재하지 않는다.
  • Object의 키는 String과 Symbol 밖에 될 수 없으나, Map에서는 어떠한 값도 Key로 저장하는 것이 가능하다.
null, undefined, NaN 등도 가능하다(!)
  • Object에서는 그 크기를 계속해서 추적해야만 하지만 Map에서는 손쉽기 Collection의 크기를 얻을 수 있다.

하지만 이것이 모든 곳에서 Map을 사용해야 한다는 의미는 아니며, Object는 여전히 대부분의 경우에 사용할 수 있다. 특히 OOP 패러다임의 객체 역할에는 기존의 Object만이 유용하며, Map 인스턴스는 데이터의 Collection인 경우에만 기존에 사용되던 Object를 Map으로 대체하는 것을 고려해볼 수 있다. 좀 더 명확한 용도 구분을 위해서 MDN에서는 다음과 같은 기준을 제시하였다.

  • 통상적으로 키(Key)를 런타임까지 알 수 없으며, 그 데이터를 유동적으로 다루어야 하는 경우
  • 문자열이 아닌 키(Key)가 필요한 경우
  • Key/value pair가 계속해서 추가되거나 삭제되는 경우
  • 자주, 쉽게 변하는 임의의 개수의 Key/value pair를 다루는 경우
  • 저장된 데이터를 순회하여 특정 작업을 하는 경우

위의 기준들은 기존의 Object를 대신하여 Map을 사용하기 적절한 경우이다. 반대로 고정된 Key/value pair가 존재하며 그 데이터들이 독립적인 용도로 사용되는 경우 Object가 적절하다. Class의 인스턴스가 특정한 목적의 Property와 Method를 가지는 경우가 이에 해당한다고 볼 수 있겠다.

좀 더 상세한 설명과 API는 아래의 MDN 문서를 참고하도록 하자

결론: 그래서…Map이 널리 사용될까?

이 질문에 대한 답은 필자도 알 수 없으나, 개인적인 의견을 조심스럽게 피력하자면 다음과 같다.

일부 자바스크립트 라이브러리 등에서 Map의 명확한 의미론적 용도가 적합한 부분에 한하여 Map의 사용이 늘어나고 있다. 현재로는 실무 개발자들이 직접적으로 Map이라는 새로운 데이터 구조를 다루어야 하는 상황은 제한적이지만 머지않아 라이브러리의 Public API를 통해서 노출되는 빈도가 늘어날 것으로 본다. 따라서 최소한 Map의 특징과 용도, 기본적인 사용법을 익혀두는 것이 시간낭비는 아닐 것이라고 생각한다.

* WeakMap, Set, WeakSet에 대해서도 후속 포스팅을 통해 알아보겠다.

Show your support

Clapping shows how much you appreciated Sangboak Lee’s story.