オブジェクト

オブジェクトとは

複数のデータを扱う方法として配列について説明をしましたが、JavaScriptには他にも複数のデータの集合を扱う方法があります。
それが オブジェクト です。（連想配列やハッシュとも呼ばれています。）
オブジェクトは下記のようにプロパティと値の間をコロン（:）で繋いだ組み合わせをカンマ区切りで記述し、全体を波括弧（{}）で囲むことで生成できます。
この表記方法を オブジェクトリテラル といいます。

{
  プロパティ1: 値1,
  プロパティ2: 値2
}

配列ではインデックスをキーにしてその要素を参照したり、代入したりすることができました。
一方、オブジェクトでは プロパティ をキーにすることで、同様に要素への参照や代入を行うことができます。
下記の図のように複数の入れ物に、それぞれ名前がつけている構造です。
それぞれの入れ物につけられている名前がプロパティとなります。
オブジェクトは文字列であるプロパティをキーにしてデータにアクセスできるので、配列と比べると可読性の高いデータ構造と言うことができます。

page_2_1_9.png

図の配列を初期化するスクリプトは下記のよう記述することができます。

var person = {name: 'Taro', age: 22, gendar: 'male'};

プロパティには数値や文字列などのデータのほか、関数を格納することができます。関数を格納されたプロパティはメソッドといいます。

プロパティの参照と代入

オブジェクトから値を取り出す方法は２つあります。
1つ目はドット（.）でプロパティを指定する ドット記法 、もう一つが角括弧（[]）内に文字列のプロパティで指定する ブラケット記法 です。

// ドット記法
オブジェクト名.プロパティ
// ブラケット記法
オブジェクト名['プロパティ']

下記のサンプルではドット記法とブラケット記法でプロパティで値を取得してログに出力しています。

function outputObject_1() {
  var person = {name: 'Taro', age: 22, gendar: 'male'};
  console.log(person.name); // Taro
  console.log(person['age']);  // 22
}

一般的にドット記法の方が単純に記述できて可読性も高いので、どちらでもよい場合はドット記法を使うことがおすすめです。
一方で、ブラケット記法は変数を使用してプロパティの指定ができることがメリットと言えます。

for in 文 によるループ内でプロパティの値を取り出す際などはブラケット記法が有効です。


いずれの記法でも下記のようにイコール（=）を使うことで指定したプロパティの値を代入することができます。
また、オブジェクトに存在しないプロパティを指定して代入をするとオブジェクトにプロパティと値が追加されます。

// ドット記法
オブジェクト名.プロパティ = 値;
// ブラケット記法
オブジェクト名['プロパティ'] = 値;

function outputObject_2() {
  var person = {name: 'Taro', age: 22, gender: 'male'};
  person.name = 'Hanako';
  person['gender'] = 'female';
  person.job = 'Engineer';
  console.log(person);  // {name:'Hanako', age:22, gender:'female', job:'Engineer'}
}

存在しないプロパティから値を取り出そうとすると、その値はundefinedとなります。