オブジェクトリテラル

オブジェクトとは、とても簡単に説明すると複数のプロパティを持つコンテナの事です。
早速、オブジェクトを作ってみます。

例）タナカ タロウ(TanakaTaro)さんと言う人（Human）オブジェクトを作ってみます。

var Human = {
	firstName : 'Taro',
	lastName : 'Tanaka'
};

上記は人（Human）オブジェクトに名前（firstName）プロパティと苗字(lastName)プロパティを記述しています。
プロパティはそれぞれ「名前」と「値」の関係になり「: (コロン)」で区切ります。

今回ですと以下の通りです。

名前（firstName）：タロウ（Taro）
苗字（lastName）：タナカ（Tanaka）

そして、上記のように名前と値で構成されいるオブジェクトをオブジェクトリテラルと言います。

オブジェクトをネスト（入れ子）する

次にタナカ タロウさんの詳しい情報を追加しましょう。

タナカ タロウさんは大阪の豊中市の出身です。

var Human = {
		firstName : 'Taro',
		lastName : 'Tanaka',
		hometown: {
				country : 'Japan',
				prefecture :'Osaka',
				city :'Toyonaka'
		}
};

出身地（hometown）プロパティを追加しました。
さらに出身地の中に国（country）、都道府県(prefecture)、市町村(city)のプロパティをネストしています。
このようにオブジェクトはネストが可能です。

値を習得してみる

オブジェクトから値を取り出すには以下のようにします。

Human['firstName']// Taro

文字列がJavaScriptの予約語とぶつかっていなければ[“]や「’」で括らずに

Human.firstName // Taro

と「.」で繋ぐ事も可能です。

値を更新してみる

唐突ですが、タナカ タロウさんは実はタナカ ジロウさんでした。
※突っ込みどころ満載ですが、聞き流してください。
以下のようにして名前をジロウさんに書き換えます。

Human['firstName'] ='Jiro';

上記は人（Human）オブジェクトに名前（firstName）プロパティの値を変更しています。

var Human = {
        firstName : 'Taro',
        lastName : 'Tanaka',
        hometown: {
                country : 'Japan',
                prefecture :'Osaka',
                city :'Toyonaka'
        }
};

Human['firstName'] ='Jiro';
document.writeln(Human['firstName']);　//Jiro

次はタナカ タロウさんは実は枚方市の出身だった場合です。
枚方市は日本の大阪府の中にあるので変更するのは市町村（city）のみです。

var Human = {
        firstName : 'Taro',
        lastName : 'Tanaka',
        hometown: {
                country : 'Japan',
                prefecture :'Osaka',
                city :'Toyonaka'
        }
};

Human['hometown']['city'] ='Hirakata';
document.writeln(Human['hometown']['city']);

ネストしている値はこのように指定します。

Human['hometown']['city'] ='Hirakata';

もちろん、「.」で繋いでもかまいません。

Human.hometown.city ='Hirakata';

プロパティの追加

次は現在存在しないプロパティを追加する方法です。

タナカ タロウさんは先生をやっています。
職業の情報がありませんでしたので追加してみます。

Human['job'] ='Teacher';
//または
Human.job = 'Teacher';

記述自体は値の更新と同じです。

参照について

タナカ タロウさんはパイロットに転職しました。
これまでのコードに以下を続け、変更してみます。

var x = Human;
x.job = 'Pilot';

値の更新の説明ではオブジェクトに直接アクセスして更新を行いました。
今回はオブジェクトの値を変数に代入する方法で更新をしています。

以下に、職業の追加、変数に代入、変更　までの一連の流れを纏めてみました。
そして、最後に変数に代入されたオブジェクト自身がどうなったのかを確認しています。

var Human = {
        firstName : 'Taro',
        lastName : 'Tanaka',
        hometown: {
                country : 'Japan',
                prefecture :'Osaka',
                city :'Toyonaka'
        }
};

//職業のプロパティを追加
//職業は教師
Human['job'] ='Teacher';

//書き出して確認
document.writeln(Human['job']); // Teacher

//変数x　に人(Human)オブジェクトを代入する。
var x = Human;

//職業をパイロットに変更
x.job = 'Pilot';

//変数xのjobの値を確認する
document.writeln(x['job']); //Pilot

//人(Human)オブジェクトの値を確認する
document.writeln(Human['job']);　 //Pilot

確認用サンプル

人(Human)オブジェクトの職業(job)を確認すると、値が変わっているのが分かります。

これは「オブジェクトは「参照渡し」が行われる為、コピーはされない」
と言う事を意味します。

参照渡しについては、ここで収まる説明が出来るほどの理解が出来ていませんので、今回は割愛させていただきます。
「参照渡し」についての参考記事