概要

javascriptのオブジェクトのプロパティにアクセスする方法について、試してみます。

オブジェクトのプロパティ値にアクセスする時、プロパテアクセス式が評価されます。
式が評価されるタイミングで、オブジェクトのプロパティの値か配列の要素として解釈されます。

具体的には「式.識別子」「式[式]」のように書きます。

「式.識別子」の場合は、式がオブジェクト、識別子がプロパティの名前です。

「式[式]」の場合は、式がオブジェクト(配列)になり、括弧で囲った式でプロパティや配列のインデックスを書きます。

オブジェクトのプロパティへアクセスする方法

実際に下記のようなコードを書いて試してみました。

//検証用オブジェクト1
var test = {a:100, b:200};

//オブジェクト内にオブジェクトがある例
var hoge = {c:300, d:{e:400, f:500}};

//オブジェクトプロパティ式
console.log(test.a);
console.log(hoge.d.e);
console.log(hoge.d.f);

//プロパティaにアクセス(このような書き方も動作可能)
console.log(test["a"]);

上記の場合、検証用オブジェクト1というオブジェクトを用意し、
そのオブジェクトに対し、プロパティにアクセスした結果を出力しています。

出力結果は次のようになります。

100
400
500

上記のようにプロパティアクセス式を使う場合は特に問題なく結果が出力されますが、
もしオブジェクトを定義していないものに対してプロパティアクセス式を使った場合、
例外エラーが発生します。

プロパティアクセス式は、まず式を見てから識別子を判別します。

逆に式となるオブジェクトが存在していて、アクセスする要素が無い場合も例外エラーが発生します。

配列の要素へアクセスする方法

オブジェクトとは別に配列にアクセスする場合も試してみます。

配列の要素にアクセスするには括弧を使ってアクセスします。
具体的には以下のように書きます。

//検証用オブジェクト2(配列の場合)
var test2 = [10, 20, 30, 40, [50, 60]];

//配列の2番目の要素にアクセス
console.log(test2[1]);

//配列の5番目の要素の配列の2番目にアクセス
console.log(test2[4][1]);

この場合の結果は次のようになります。

20
60

上記の結果のように、オブジェクト式の後に括弧が連続する場合は、2番目の式を評価して結果を出力します。

要素に他のオブジェクトを持つ場合

下記のように要素内に他の要素を持つオブジェクトに対してプロパティアクセス式を書いた場合について、試してみます。

下記のコードを書いて動作させたところ

//検証用オブジェクト1
var test = {a:100, b:200};

//検証用オブジェクト3(要素に他のオブジェクトを持つ場合)
var test3 = [test, 20, 30, 40, [50, 60]];

//他のオブジェクトのプロパティにアクセス
console.log(test3[0].b);

//他のオブジェクトのプロパティにアクセス(括弧を使用)
console.log(test3[0]["a"]);

出力結果は次のようになります。

200
100

正しくプロパティにアクセスできる場合に値が返り、結果が出力されます。

test3という変数(オブジェクト)に対して1つ目の要素に別オブジェクトがある場合、1つ目の括弧の後に括弧を書いて式を評価します。

上記のように、プロパティにアクセスする際、「.」でアクセスする方法と「[要素名]」でアクセスする方法の2つがあります。

二つのアクセス方法には、一見すると結果に違いはありませんが、
「.」識別子のほうはプロパティ名称が明確にわかっている場合に有効になります。
また、プロパティ名称が予約語の場合や、空白などの場合には「[]」の括弧を使ったプロパティアクセスをします。