JavaScriptにおける連想配列とは？作成方法からループ処理まで基本的な使い方について分かりやすく解説

連想配列はキーを任意に決定できることで、格納されている情報を連想しやすくした配列ですが、プログラミング言語でとても便利に使うことができます。またJavaScriptでも、連想配列のオブジェクトを簡単につくることができます。この記事では、JavaScriptにおける連想配列とはなにか、連想配列の作成からループ処理まで基本的な使い方について解説します。

連想配列とは
連想配列の基本的な操作方法
まとめ
JavaScriptを短期間かつ効率的に学びたい方は

連想配列とは

配列とは

まずは配列とは何か解説します。配列とは、プログラミングにおいて複数の値を1つのデータのように取り扱うデータ構造のことです。プログラミングでは、文字列や数値などの値を1つの変数に格納していきます。JavaScriptでは複数の値をひとつのデータ群として扱うため、「Arrayオブジェクト」が用意されています。また配列内の値ごとにインデックス番号が割り当てられます。番号は左から順に0から始まる数字が自動的に割り当てられます。

JavaScriptの配列については、下記の記事で詳しく解説しています！

連想配列とは

連想配列とは、自動的に割り当てられる数字の代わりに、自由に任意の文字列を割り振ることができる配列です。任意に割り振った文字列のことを「キー」といいます。キーを任意に指定できることによって、そこに格納されている値が何を意味しているのか簡単に連想できるようになります。また連想配列は要素ごとの変数をまとめて管理できるという配列としての主目的のほかにも、オブジェクトとみなしてfunction（関数）を格納することができるという特徴もあります。そのため、さまざまなライブラリなどで用いられています。

JavaScriptの関数については、下記の記事で詳しく解説しています！

オブジェクトとの違い

JavaScriptの連想配列について説明しましたが、厳密にはJavaScriptには「連想配列」は存在しません。他のプログラミング言語で「連想配列」と呼ばれているものを、JavaScriptでは「オブジェクト」または「オブジェクトリテラル」と呼びます。一般的に値が入っているものを連想配列といいますが、JavaScriptのオブジェクトは、値だけでなく関数（処理）も入れることができます。そのため広い意味でオブジェクトと呼んでいます。つまり、JavaScriptにおいては「連想配列」＝「オブジェクト」と考えて問題ありません。

連想配列の基本的な操作方法

連想配列を作成する

連想配列は「キー」と「値」がペアになった構造をしているのが特徴です。ちなみに、「値」に関しては文字列・数値・関数・オブジェクト…など、基本的に配列と同じくさまざまな値を格納できます。

記述方法は次のようになります。

var array = { キー名称 : 値 , キー名称 : 値 , キー名称 : 値 , キー名称 : 値 , ・・・ }

この構文を元に、簡単なユーザー情報を保持する連想配列を作成します。

コードの記述は次のようになります。

var user = { name:’田中’, age:27, hobby:’サッカー’ };

この例では、「キー」となる箇所に「name」と記述して「値」には名前の「田中」を設定しています。これによりユーザーの名前が連想配列として格納されたことになります。同じように「age」や「hobby」という情報も設定することで、様々なユーザー情報を格納することができます。

要素を取得する

「値」を取得する方法

まずは、連想配列の「値」を取得する方法から解説します。

連想配列の場合はキーとなる名称があらかじめ付けられているのでこれを利用します。

コードの記述は次のようになります。

var user = { name:’田中’, age:27, hobby:’サッカー’ };

console.log( user[‘name’] );

console.log( user.name );

//実行結果はどちらも「田中」となります

この例では、キーとなる名称「name」を使ってユーザーの名前を取得して出力しています。「user[‘name’]」のように添字にキーを指定するか、「user.name」とすることで目的の値を取得することができます。

「キー」を取得する方法

次に、連想配列の「キー」を取得する方法について解説します。「キー」を取得するには、最も簡単な方法として「Object.keys()」メソッドを使う方法があります。

一般的な記述方法としては、次のようになります。

Object.keys( 連想配列 )

コードの記述は次のようになります。

var user = { name:’田中’, age:27, hobby:’サッカー’ };

var key = Object.keys(user);

console.log( key );

//実行結果は「name, age, hobby」となります

この例では、「Object.keys」メソッドを使って連想配列の「キー」を取得しています。実行結果を見ると、すべての「キー」が取得できています。また、配列のように「key[0]」と記述すれば、連想配列の1番目の要素にある「キー」を取得することも可能です。

要素を追加する

連想配列に値やキーを追加する方法について解説します。　「name」「age」「hobby」という3つのキーからなる連想配列に、「job」というキーでユーザーの職業情報を追加します。

コードの記述は次の2パターンあります。

//チェーンで追加する方法

user.job = ‘プログラマー’;

チェーンで追加する方法は「.（ドット）」で設定したキーの名称を繋げて値を追加する方法です。

// 添字で追加する方法

user[‘job’] = ‘プログラマー’;

添字を使う方法は配列のように[ ]を使ってキーの名称を指定して値を追加します。

どちらの方法でも同じことが実現できますが、例えばキーの名称が日本語などの場合は添字で追加する方法が最適でしょう。実際に「job」というキーと値を追加します。

コードの記述は次のようになります。

var user = { name:’田中’, age:27, hobby:’サッカー’ };

user.job = ‘プログラマー’;

console.log( user );

//実行結果は「{ name:’田中’, age:27, hobby:’サッカー’ ,job:’プログラマー’}」となります

連想配列をループ処理する

連想配列を「for-in文」で操作する方法を解説します。「for-in文」を利用すると、少ない記述で効率よく「キー」や「値」を取得・設定することが可能です。

一般的な記述方法は、次のようになります。

for( var 変数 in 連想配列 ) { }

連想配列からデータを取得する変数とペアで記述します。

コードの記述は次のようになります。

var user = { name:’田中’, age:27, hobby:’サッカー’ };

for(var key in user) {

console.log( key );

}

//実行結果は「name」「age」「hobby」となります

この例では、for-in文のin演算子を使用してループ毎に連想配列から「キー」を取得しています。変数「key」には、ループ毎に「キー」が代入されるので実行結果のようにキーだけを取得することが可能なのです。

まとめ

この記事では、JavaScriptにおける連想配列とはなにか、連想配列の作成からループ処理まで基本的な使い方について解説しました。JavaScriptの連想配列は、記述の基本である上、使えるようになると変数、オブジェクトの理解が深まります。また連想配列は多くのデータを格納し取り出すことができるため、使用できるようになるとデータ操作が格段に容易になります。この記事を参考にJavaScriptの連想配列を習得していただければと思います。