#16 JavaScriptで学ぶ辞書型(マップ)の基本

JavaScriptで名前と値の組み合わせを扱う仕組みには、「オブジェクト」と「Map」という2つの選択肢があります。この記事では、JavaScriptにおける辞書に相当する使い方と、使い分けを解説します。

オブジェクトを使う方法

const person = { name: "太郎", age: 20 };
console.log(person.name); // 太郎
person.job = "学生";

ドット記法または角かっこで値にアクセスできます。

Mapという専用の仕組み

比較的新しいJavaScriptには、辞書専用のMapという機能もあります。

const person = new Map();
person.set("name", "太郎");
console.log(person.get("name"));

person.sizeで正確な要素数を取得できるなど、オブジェクトより辞書としての機能が充実しています。

キーが存在するか確認する

if ("email" in person) {
    console.log(person.email);
}

Mapの場合はhas()というメソッドを使います。

if (person.has("email")) {
    console.log(person.get("email"));
}

全てのキーと値を順に処理する

for (const [key, value] of Object.entries(person)) {
    console.log(key, value);
}

Mapの場合はfor...ofでそのまま繰り返せます。

for (const [key, value] of person) {
    console.log(key, value);
}

Object.keysで一覧を取得する

オブジェクトのキーだけを配列として取得したい場合はObject.keys、値だけならObject.valuesが使えます。

console.log(Object.keys(person));   // ["name", "age", "job"]
console.log(Object.values(person)); // ["太郎", 20, "学生"]

JavaScriptならではの注意点

オブジェクトは手軽ですが、キーは基本的に文字列に限られます。数値や他のオブジェクトをキーにしたい場合や、追加・削除が多い場面では、Mapのほうが適しています。用途に応じて使い分けましょう。JSONとしてやり取りするデータは基本的にオブジェクトの形で扱われるため、外部とのデータ交換が主な用途であればオブジェクト、プログラム内部だけで使う辞書としての用途であればMap、という判断基準も参考になります。

まとめ

JavaScriptの辞書はオブジェクトが手軽ですが、Mapという専用の仕組みも用意されています。キーの種類や用途に応じて選びましょう。

---

本ページはプロモーションを含みます。

参考書籍(PR)

JavaScriptをもっと学びたい方には「改訂新版JavaScript本格入門」がおすすめです。

---

PR

コードを書かずに自動化したい方へ

「学んだけど自分の作業に組み込む時間がない」という方向けに、ダブルクリックで動く Windows専用の自動化ツールをオーダーメイドで作成しています。気になる方は こちらをご覧ください。