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

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

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

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

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

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

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

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

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

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

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

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

「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

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

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

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

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

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

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

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