자바스크립트 사전(Dictionary)에 요소 추가하는 방법 – put 메서드 구현

이번 글에서는 사전(딕셔너리)에 키-값 쌍을 저장할 수 있도록 해주는 put 메서드를 만들어 보겠습니다. 이 메서드를 활용하면 자바스크립트에서 간단한 맵(Map) 구조를 직접 구현할 수 있습니다.

put 메서드 구현하기

흥미로운 점은 자바스크립트의 객체(Object)가 이미 사전과 매우 유사하게 동작한다는 것입니다. 따라서 컨테이너 객체의 키 속성에 값을 할당하는 방식만으로 put 메서드를 손쉽게 구현할 수 있습니다.

예제 코드

put(key, value) {
    this.container[key] = value;
}

이렇게 구현한 put 메서드는 전달받은 키를 객체의 속성으로 설정하고, 해당 키에 값을 대입합니다. 키가 이미 존재하면 기존 값이 새 값으로 덮어씌워진다는 점을 기억해 두세요.

구현 결과 테스트하기

앞서 구현한 함수들과 함께 아래와 같이 테스트해 볼 수 있습니다.

예제 코드

const myMap = new MyMap()
myMap.put("key1", "value1")
myMap.put("key2", "value2")

myMap.display()

console.log(myMap.hasKey("key1"));
console.log(myMap.hasKey("key3"));

실행 결과

{key1: "value1", key2: "value2"}
true
false

실행 결과를 보면 key1과 key2는 정상적으로 저장되어 true를 반환하지만, 추가하지 않은 key3에 대해서는 false가 반환되는 것을 확인할 수 있습니다.

ES6 Map 객체의 set 메서드 활용

ES6(ECMAScript 2015)부터는 표준 내장 객체인 Map을 사용할 수 있습니다. Map에서는 set 메서드를 사용해 키-값 쌍을 추가합니다.

예제 코드

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

myMap.set("key3", "value3")

console.log(myMap.has("key1"))
console.log(myMap.has("key3"))

실행 결과

true
true

생성자에 배열 형태로 초기 데이터를 넘길 수도 있고, 이후 set 메서드로 새로운 요소를 계속 추가할 수도 있습니다. 실무에서는 별도의 커스텀 구현보다 ES6의 Map을 사용하는 것이 키 타입 제약이 적고 성능 면에서도 유리하기 때문에 일반적으로 권장됩니다.