자바스크립트 딕셔너리(맵)에서 키와 값 다루기: keys()와 values() 메소드 활용법

딕셔너리(Map) 객체를 다루다 보면 전체 데이터가 아니라 키(key)만 필요한 경우가 종종 있습니다. 예를 들어, 저장된 모든 키 목록을 배열 형태로 가져와 반복 처리하거나 화면에 출력해야 할 때가 그렇습니다. 자바스크립트에서는 Object.keys() 메소드를 사용하면 객체의 속성(키)들을 아주 간단하게 추출할 수 있습니다.

이번 글에서는 커스텀 맵(MyMap) 클래스와 ES6의 Map 객체에서 키와 값을 조회하는 방법을 예제 코드와 함께 살펴보겠습니다.

1. keys() 메소드로 키 목록 가져오기

커스텀 맵 클래스 내부에 keys() 메소드를 구현하면, 내부 컨테이너 객체의 모든 키를 배열로 반환할 수 있습니다. 구현 방법은 다음과 같습니다.

구현 예제

keys() {
    return Object.keys(this.container);
}

실행 예제

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

console.log(myMap.keys());

출력 결과

[ 'key1', 'key2' ]

위 코드에서 볼 수 있듯이, Object.keys()는 객체에 저장된 키들을 문자열 배열 형태로 깔끔하게 반환합니다.

2. ES6 Map에서 keys() 사용하기

ES6에서 도입된 표준 Map 객체 역시 동일한 이름의 keys() 메소드를 제공합니다. 다만 한 가지 차이점이 있는데, 표준 Map의 keys()는 배열이 아닌 MapIterator 객체를 반환한다는 점입니다.

반환된 이터레이터는 Array.from()이나 스프레드 연산자([...])로 배열로 변환할 수도 있고, 일반 이터레이터처럼 순회하는 데 그대로 사용할 수도 있습니다.

실행 예제

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

console.log(myMap.keys());

출력 결과

MapIterator { 'key1', 'key2' }

3. values() 메소드로 값 목록 가져오기

반대로 딕셔너리에 저장된 값(value)만 필요한 경우도 있습니다. 안타깝게도 일반 객체에는 값만 직접 추출해 주는 메소드가 없기 때문에, 객체를 순회하면서 각 키에 해당하는 값을 하나씩 수집해야 합니다. 구현 예제는 다음과 같습니다.

구현 예제

values() {
    let values = [];
    for (let key in this.container) {
        values.push(this.container[key]);
    }
    return values;
}

실행 예제

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

console.log(myMap.values());

출력 결과

[ 'value1', 'value2' ]

for...in 루프를 통해 컨테이너의 모든 키를 하나씩 꺼내고, 해당 키로 접근한 값을 배열에 추가하는 방식입니다. 최종적으로 값들만 담긴 배열이 반환됩니다.

4. ES6 Map에서 values() 사용하기

ES6 표준 Map 객체에는 values() 메소드가 기본으로 내장되어 있어 별도 구현 없이 바로 사용할 수 있습니다. 동작 방식은 앞서 살펴본 keys()와 동일하며, 마찬가지로 MapIterator 객체를 반환합니다.

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

console.log(myMap.values()); // MapIterator { 'value1', 'value2' }

정리

- 커스텀 맵: Object.keys()로 키를, for...in 루프로 값을 추출합니다.
- ES6 Map: keys()와 values() 메소드가 기본 제공되며, 두 메소드 모두 MapIterator 객체를 반환합니다.
- 이터레이터를 배열로 변환하려면 Array.from() 또는 스프레드 연산자를 활용하면 됩니다.

키와 값 조회는 맵 자료구조를 활용하는 데 있어 가장 기본적이면서도 자주 사용되는 연산이므로, 두 방식의 차이를 잘 이해해 두면 실무에서 큰 도움이 됩니다.