JavaScriptで辞書（マップ）をループ処理する方法

はじめに

JavaScriptでは、辞書（キーと値のペアを管理するデータ構造）の中身を順番に処理したい場面がよくあります。ここでは、独自の辞書クラスにforEach関数を実装し、すべてのキーと値のペアに対して呼び出されるコールバック関数を受け取れるようにする方法を紹介します。

自作クラスでのforEach実装例

まずは、クラス内にforEachメソッドを実装してみましょう。for...inループでコンテナ内の各プロパティを走査し、キーと値を引数としてコールバックに渡します。

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(`Key is ${k} and value is ${v}`));

出力結果

上記のコードを実行すると、次のような出力が得られます。

Key is key1 and value is value1
Key is key2 and value is value2

ES6のMapオブジェクトを使う場合

ES6（ECMAScript 2015）で標準搭載されたMapオブジェクトにも、同じように使えるforEachというプロトタイプメソッドが用意されています。自作クラスとほぼ同じ感覚で利用できるため、特別な理由がない限りはこちらを使うのがおすすめです。

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

myMap.forEach((k, v) => console.log(`Key is ${k} and value is ${v}`));

出力結果

この場合も、実行すると次の出力が得られます。

Key is key1 and value is value1
Key is key2 and value is value2

まとめ

辞書型データのループ処理には、自作クラスにforEachを実装する方法と、ES6のMapオブジェクトの組み込みメソッドを使う方法の2つがあります。後者は標準機能として安定しており、コールバックの形式も直感的なので、実際の開発ではES6のMapを活用するのが効率的です。また、entries()メソッドやfor...of構文と組み合わせれば、さらに柔軟な反復処理も可能になります。