자바스크립트로 사전(Dictionary) 만들기 – MyMap 클래스와 ES6 Map 활용법

이 글에서는 자바스크립트로 사전(Dictionary) 자료구조를 직접 구현하는 방법을 알아봅니다. 내장 Map 클래스와 이름이 충돌하지 않도록 MyMap이라는 별도의 클래스를 만들고, 맵에 추가되는 모든 값을 관리할 컨테이너 객체를 정의하겠습니다. 또한 맵의 현재 상태를 출력해 주는 display 함수도 함께 작성합니다.

예제: MyMap 클래스 기본 구조

class MyMap {
  constructor() {
    this.container = {};
  }
  display() {
    console.log(this.container);
  }
}

ES6(ECMAScript 2015)부터는 Map 클래스를 사용해 사전을 바로 생성할 수 있습니다. 인수 없이 빈 맵을 만들 수도 있고, 키-값 쌍으로 이루어진 배열을 전달하여 초기화할 수도 있습니다.

예제: ES6 Map으로 사전 생성하기

const map1 = new Map();
const map2 = new Map([
  ["key1", "value1"],
  ["key2", "value2"]
]);

키 존재 여부 확인하기

특정 키가 이미 맵에 등록되어 있는지 확인하려면 hasKey 메서드를 정의해야 합니다. 이 메서드는 요소를 삭제하거나 새로운 값을 설정하기 전에 유효성을 검사할 때 매우 유용하게 활용됩니다.

예제: hasKey 메서드 구현

hasKey(key) {
  return key in this.container;
}

ES6의 Map 객체에서는 별도의 구현 없이 has 메서드만으로 키의 존재 여부를 간단히 확인할 수 있습니다.

예제: has 메서드 사용하기

const myMap = new Map([
  ["key1", "value1"],
  ["key2", "value2"]
]);
console.log(myMap.has("key1"));
console.log(myMap.has("key3"));

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

true
false

myMap에는 key1이 존재하므로 첫 번째 호출은 true를 반환하고, 등록되지 않은 key3에 대한 두 번째 호출은 false를 반환합니다. 이처럼 직접 구현한 MyMap과 ES6의 Map은 각각의 장점이 있으므로, 프로젝트 요구 사항에 맞게 선택하여 사용하면 됩니다.