JS初心者がオブジェクトのプロパティへのアクセスを理解する

目的

　自分のようなJavaScript入門者への情報共有、また自分の備忘録のために作成します。

結論

　オブジェクトのプロパティへのアクセスについて、ドット演算子でもブラケット演算子でもよい。
　ただし、「プロパティに変数の値を使いたい」。この場合のみ、ブラケット演算子で書かなければならない。

内容

　JavaScriptでオブジェクトのプロパティの値を得たい場合、以下2つの方法があります。

var obj = { hoge: "hoge" }; //オブジェクトobjのhogeプロパティの値は0

console.log(obj.hoge);  // 方法A(ドット演算子を用いるやり方)
console.log(obj["hoge"]); // 方法B(ブラケット演算子を用いるやり方)
// どちらも"hoge"が表示される

　方法Bは、JavaのMap(連想配列)のような書き方です。プロパティの中にさらにオブジェクトや配列を入れる場合、可読性が悪くなるでしょう。（後述します）
　「ここではインスタンス(オブジェクト)のフィールド(プロパティ)を取ってきているんだ！」という意図を、コード上で明らかにしたいため、私は方法Aを選択したい。

　よって、コードの全てを方法Aで統一したいところですが、ここで、変数に対応したプロパティの値を得たい場合を考えます。

var obj = { hoge: "hoge" };

var key = "hoge";
console.log(obj.key);
// "undefined"が表示される（「変数が未定義」ということ）

console.log(obj[key]);
// "hoge"が表示される

　オブジェクトに対し、与えた変数値のプロパティを得たい場合は、方法Bでなければなりません。
　オブジェクトのプロパティへの読み書きについて、基本的に方法Aでよいのですが、この場合のみ、方法Bでコーディングしなければならない。

　余談ですが、「プロパティの中に配列のあるオブジェクトのプロパティに、変数値を使いたい場合（変数は配列とする）」を考えてみます。

var obj = { hoge: ["hoge0", "hoge1"]};

var key = ["hoge", "piyo"];
for (var i = 0; i < obj[key[0]].length; i++) {
  console.log(obj[key[0]][i])
}

　ブラケット演算子は、ArrayやMapでのみ用いる！　としたいところですが。

参考文献

Qiita: "javascriptの連想配列と配列の違い" @katsukii氏
Qiita: "JavaScriptのオブジェクトのキーに変数の値を使うTips" @masarufuruya氏