Map(キーと値のペアを扱うオブジェクト)の基本

このレッスンでは、JavaScriptのMapオブジェクトの基本を学び、オブジェクトよりも高機能なキーと値のペアの扱い方を理解することを目標にします。「JavaScript Map 使い方」「JavaScript Map Object 違い」で調べている方向けです。

Mapは、オブジェクトと同じように「キーと値」を保存できる仕組みですが、キーの追加順が保たれたり、has()で存在確認ができたりと、より扱いやすい機能を持っています。.set(キー, 値)で追加、.get(キー)で取得、.has(キー)で存在確認ができます。

サンプルコードでは、scoresというMapに名前をキーとして点数を登録し、.get("たろう")で値を取得、.has("じろう")で存在しないキーを確認しています。.forEach((value, key) => { ... })で全件をループする際、値とキーの引数の順番がオブジェクトの場合と少し異なる点にも注目してみましょう。

初心者がよくつまずくのが、Mapのサイズを調べるときに配列の.lengthではなく.sizeというプロパティを使う点です。オブジェクトや配列とAPIが少しずつ異なるため、最初は戸惑うことがありますが、キーの存在確認やサイズ取得がしやすい分、実務ではオブジェクトより扱いやすい場面も多くあります。

キーに文字列以外(数値やオブジェクトなど)を使いたい場合や、大量のデータを高速に扱いたい場合にも、オブジェクトよりMapが適していることが多くあります。大量のデータを効率よく管理したいときの選択肢として、覚えておくと役立ちます。