JavaScript - 配列とオブジェクトの違い、使い分けの目安

JavaScriptで使用頻度の高いデータ型として「配列」と「オブジェクト」があります。

どちらも便利なものなのですが、考え方や扱い方が違います。

ここでは、「配列」と「オブジェクト」の違いについて、 使い分けの観点から説明します。

配列とオブジェクトの概要

配列

配列とは、データの集合のことで、データの集合をインデックス(添字)で管理します。

配列は、主に「同じ種類のデータ」を扱う場合に使用します。

オブジェク

オブジェクトとは、「名前」と「値」の組(プロパティ)の集合です。

オブジェクトは、主に「違う種類のデータ」を扱う場合に使用します。

使い分けの具体例

配列で扱う「同じ種類のデータ」と、 オブジェクトで扱う「違う種類のデータ」を具体的にイメージするには、 エクセル等で扱う「表」をイメージしてください。

次のような表があるとします。

id名前年齢
1田中30
2山田25
3鈴木28
4大田32
5山本35

配列の「同じ種類のデータ」とは

「同じ種類のデータ」とは、表の縦方向のデータのことです。

同じ種類のデータ

「id」、「名前」、「年齢」は、縦方向でみると「同じ種類のデータ」と言えます。

上図の赤枠の部分、「名前」という同じ種類のデータを配列で管理する場合、


var arr = ['田中', '山田', '鈴木', '大田', '山本'];

というように配列で記述します。

オブジェクトの「違う種類のデータ」とは

「違う種類のデータ」とは、表の横方向のデータのことです。

違う種類のデータ

「id」、「名前」、「年齢」は、横方向でみると、ぞれぞれ「違う種類のデータ」と言えます。

上図の赤枠の部分、「違う種類のデータ」をオブジェクトで管理する場合、


var obj = {
	id: 2,
	name: '田中',
	age: 25
};

というようにオブジェクトで管理します。

表自体はどう扱えばいい?

先程、表の縦方向は配列で管理横方向はオブジェクトで管理すると説明しました。

では、縦も横もある「表自体」はどうすればいいのでしょうか?

この場合は、配列とオブジェクトの組み合わせとなります。

表の横方向をオブジェクトで管理して、縦方向を配列で管理します。

つまり、「オブジェクトの配列」として管理します。

オブジェクトの配列ですから、一例として次のような記述となります。


var arr = [
	{
		id: 1,
		name: '田中',
		age: 30
	},
	{
		id: 2,
		name: '山田',
		age: 25
	}
	// 以下省略
		
]

// データ取得
console.log(arr[0].name); // 田中

データを取得する際は、配列のインデックスとオブジェクトのプロパティ名を使って、


arr[0].name

というように取得します。

実際のプログラムでは?

実際に複雑なプログラムを作成する場合は、 「オブジェクトの配列」、「配列の配列」というように、 配列やオブジェクトを組み合わせで使う場面が多々あります。

ですから、まずは「配列」「オブジェクト」の基本をしっかりと押えた上で 応用編である「組み合わせ」にも対応できるように学習してください。

まとめ

・「配列」は表の縦方向、「同じ種類のデータ」を管理します。

・「オブジェクト」は表の横方向、「違う種類のデータ」を管理します。

・表自体は「オブジェクトの配列」で管理します。

・実践的なプログラムになるほど、「配列」と「オブジェクト」を組み合わせて使うことが多くなります。