JavaScript에서 사전(Map)을 순회하는 방법

이번 글에서는 클래스 내부에 forEach 함수를 직접 구현하고, 모든 키-값 쌍에 대해 호출할 수 있는 콜백(callback)을 인자로 받는 방법을 살펴보겠습니다. 이러한 함수는 다음과 같이 구현할 수 있습니다.

예제

forEach(callback) {
    for (let prop in this.container) {
        // callback(key, value) 형태로 콜백 호출
        callback(prop, this.container[prop]);
    }
}

위 코드는 아래와 같이 테스트해 볼 수 있습니다.

예제

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

myMap.forEach((k, v) => console.log(`키는 ${k}이고 값은 ${v}입니다`));

출력 결과

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

키는 key1이고 값은 value1입니다
키는 key2이고 값은 value2입니다

참고로 ES6의 Map 객체 역시 프로토타입 메서드로 forEach를 제공하며, 위에서 구현한 방식과 동일하게 사용할 수 있습니다. 예를 들어 다음과 같습니다.

예제

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

myMap.forEach((k, v) => console.log(`키는 ${k}이고 값은 ${v}입니다`));

출력 결과

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

키는 key1이고 값은 value1입니다
키는 key2이고 값은 value2입니다

ES6 Map의 forEach 메서드는 콜백에 (값, 키, 맵 자신) 순서로 인자를 전달한다는 점에 유의하세요. 일반 배열의 forEach가 (요소, 인덱스, 배열)을 전달하는 것과 유사한 구조로, 키-값 쌍을 손쉽게 순회할 수 있도록 설계되어 있습니다.