JavaScriptの連想配列について
〜ドット表記との違いとメリット。

何の目的で？

こんにちは、「ふ」です。
今回はJavaScriptにおける連想配列について紹介します。

const obj = {
    a:"AAA",
    b:"BBB"
};

オブジェクト「obj」を作りました。
このプロパティにアクセスするには、

console.log(obj.a);
「「３▶︎ AAA」」

このようにオブジェクト名の後にどっと「.」表記でプロパティ名をつなぐ方法が一般的ですが、

console.log(obj[a]);

このように角括弧（ブラケット）を使用して呼び出すこともできます。
この形式は、連想配列と呼ばれています。

ただし、いずれの方法をつかっても只々プロパティにアクセスしているだけです。

なぜこのような使い方が用意されているのか？？？？ 連想配列とは何者なのか？　何がお得なのか？

〜について、掘り下げていきましょう。

連想配列とは？

連想配列とは「キーとなる文字列 : 値」のセットを１つのデータにまとめたものです。
通常の配列と比べてみましょう。

const arr = [
    "AAA","BBB","CCC"
];

通常の配列です。
見た目は値のみが記述されています。

[0]:値,
[1]:値,
[2]:値

しかし内部的には各値にアクセスするためのキーとして、index（通し番号）が割り当てられています。

console.log(arr[2]);
「「３▶︎ CCC」」

個々の値には、インデックスを使ってアクセスすることができます。

[文字列]:値,
[文字列]:値

これに対し連想配列は、アクセスキーに通し番号ではなく「文字列」を利用します。 文字列には任意のものを使用することができます（言語によっては予約語などの規制が少しだけある場合も）。

[name]:"taro"、
[age]:20,
[sports]:"soccer"

⬆︎が連想配列のイメージです。
フツーの配列では値へのアクセスは通し番号、つまり単なる「順番」を頼りに行います。 それに比べ連想配列は、意味付けした文字列を使用することができるので、参照しているものを予測しやすい、といった利点があります。

//pythonのdictionary。
d = {"apple":"赤", 'orange':'オレンジ'}

これはJavaScriptではなく、Pythonの「dictionary」という型です。pythonで連想配列を使う際にはこの「dictionary」という型を使用します。
python以外でもいくつかの言語では、連想配列を使う際の「型」が用意されています。

それではJavaScriptにおいて、連想配列用のデータ型というものは存在するのでしょうか。

ありません。

実を言うとJavaScriptには連想配列のための専用の「型」は存在しません。
そのかわり、オブジェクトを連想配列として使用できるようになっています。

オブジェクトを連想配列として使う。

オブジェクトを連想配列として利用するには、プロパティへのアクセスにドット「 . 」をつかうのではなく角括弧[ ]で表記するようにします。

const obj1 = {
    name:"taro",
    age:20
};

連想配列をつかって、この⬆︎オブジェクトのプロパティにアクセスしてみましょう。
オブジェクトの後に角括弧を続け、その中にプロパティ名（key）の文字列を記述します。「"」や「'」のクオテーションで囲む必要はありません。

cosole.log(obj1[name]);
「「３▶︎ taro」」

プロパティの値にアクセスすることができました。

またプロパティの値を変更したり、プロパティそのものを追加する際にも連想配列が使えます。

obj1[age] = 19;
console.log(obj1);
「「３▶︎ {name:"taro",「「１age:19」」}」」

obj1のageプロパティの値を変更しました。

obj1[sports] = "tennis";
console.log(obj1);
「「３▶︎ {name:"taro",age:19,「「１sports:"tennis"」」}」」

こちらは、obj1にsportsプロパティを生成して追加した例です。




〜と、ここまで説明してきましたが、ちっともスッキリしないでしょう。

じゃあドット表記でええやん。

obj.age = 19;
obj.sports = "tennis";

オブジェクトのプロパティには、ドット表記でも値へのアクセスや変更、プロパティの追加は同様に行うことができます。それならば、

連想配列をつかうことに何のメリットがあるのか？？？？？

メリットは「文字列を渡せる」。

オブジェクトを連想配列として使う、その最大のメリットは「プロパティ名に文字列を渡すことができる」という点です。

const obj2 = {};

obj2を作りました。ここにプロパティを追加していきます。

obj2.a = "AAA";
console.log(obj2);
「「３▶︎ {a:"AAA",b:"BBB"}」」

当然ですがドット表記を使っても、プロパティを追加することは可能です。

では。
引数２つの関数にして「プロパティ追加を自動化」しようとした場合、どうなるのでしょうか。

function tuika(key,value) {
    obj2.key = value;
}

このような関数をつくってみました。実行してみましょう。

tuika("c","CCC");
console.log(obj2);
「「３//▶︎ {a:"AAA",b:"BBB",「「４key:"CCC"」」}

プロパティは確かに１つ追加されたのですが、プロパティ名が「key」になってしまっています。

function tuika(key,value) {
    obj2.「「４key」」 = value;
}

オブジェクトのプロパティをドット表記で記述した場合、表記したものは「識別子」として扱われます。関数「tuika」の内部にある「key」ですが、obj2にドット「.」でつなげた時点で、「key」という新しいプロパティ名が生成されてしまっているのですね。
そのため引数に入れた「key」と紐づけることができないのです。


この問題を解消するのが、連想配列での記述です。
関数の処理を、連想配列形式に書き換えてみましょう。

function tuika(key,value) {
    obj2.「「１[key]」」 = value;
}

tuika("c","CCC");
console.log(obj2);
「「３▶︎ {a:"AAA",b:"BBB",「「１c:"CCC"」」}」」

すると、プロパティ名を引数のとおりにセットすることができました。 他にも例をあげてみます。

function value_output(key) {
    console.log(obj2.key);
}

value_output(a)
「「３▶︎ undefined」」

obj2のプロパティ値を出力する関数、value_outputを作りました。引数にプロパティ名を入れて、値をconsole.logする仕組みです。
出力内容を「obj2.key」とドット表記にしていますが、ここに存在するはずのプロパティ名「a」を入れて実行したところ、undefinedとなってしまいます。

関数の処理内容のところですが、またもドット表記によって引数「key」を渡しています。これでは引数と紐づけることはできません。
この関数は実行されると、obj2の「key」というプロパティを探しにいってしまうのです。そのため、結果はundefinedとなってしまうのです。

このようにドット表記で記述されたプロパティの識別子には、外部から文字列などの値を渡すことができないのです。

一方、連想配列のブラケット[ ]内にあるのは単なる「文字列」です。文字列であれば、外部から値を渡すことが可能です。

function value_output(key) {
    console.log(obj2[key]);
}

value_output(a)
「「３▶︎ AAA」」

処理内容を連想配列形式に変更したところ、ちゃんと「AAA」と出力されます。
プロパティ名に引数「a」を渡せている、ということです。

このように連想配列を使うことの最大のメリットは、「プロパティの部分に文字列を渡すことができる」ことです。フツーの配列に対して繰り返し処理などのときに、

const arr = ["A","B","C","D","E"];

for(n = 0; n<5; n++) {
    console.log(「「５arr[n]」」);
}

このように添字部分に数値を渡しているのと同じ要領ですね。

連想配列の実用例。

「連想配列には文字列が渡せる」ということで、最後に実用例を示します。

let payment = {};
function tuika(a) {
    const today = new Date();
    payment[`${today.getDate()}日の入金`] = `${a}円`;
}

オブジェクト「payment」は、１日ごとの入金額を記録していくものとします。
Dateコンストラクタのインスタンスを作って本日の日付を取得、引数に金額を入力することでpaymentに日付と金額のプロパティが追加されるようにしました。

tuika(500);
console.log(payment);
「「３▶︎ {6日の入金:'500円'}

あとは引数に金額を渡すだけで、「日付 : 金額」のプロパティが順次記録されていきます。

「文字列を渡せる」連想配列。JavaScriptに用意されているのはちゃんとした目的があったのですね。今の例のように文字列を加工してプロパティ名を生成すれば、さまざまな用途に使えそうです。


ここまでお読みくださり、ありがとうございました。「連想配列とは何者？」とモヤってた方が、この記事を読んでスッキリすることができれば幸いです。

ではまた〜 ♬