「JavaScript」ドット記法とブラケット記法

オブジェクトのプロパティにアクセスする方法は２種類ある。

ドット記法

.（ドット）を使ってプロパティにアクセスする。

var obj = new Object();

//nameというプロパティに"はらこ"という文字を格納する。
obj.name = "はらこ";

//nameというプロパティから値を取得してコンソールに表示する。
console.log(obj.name);

ブラケット記法

[]を使ってプロパティにアクセスする。

var obj = new Object();

//nameというプロパティに"はらこ"という文字を格納する。
obj["name"] = "はらこ"; 

//nameというプロパティから値を取得してコンソールに表示する。
console.log(obj["name"]);

違いについて

ブラケット記法は、プロパティ名に変数を使うことが出来る。
※ドット記法は変数を使ってプロパティにアクセスできない。

var obj = new Object();

var propertyName = "name" ;
obj[propertyName] = "はらこ"; 
console.log(obj); //Object { name="はらこ"}

obj.propertyName = "はらこ"; 
console.log(obj);  //Object { name="はらこ",  propertyName="はらこ"}

ブラケット記法は、プロパティ名が不正な文字でもアクセス可能。
不正なプロパティ名：数字で始まるプロパティ名
ドット記法の場合はエラーになる。

//ブラケット記法
var obj = new Object();
var propertyName = "0123" ;
obj[propertyName] = "はらこ"; 
console.log(obj);  // Object { 0123="はらこ"}

//ドット記法
var obj = new Object();
obj.0123 = "はらこ";  //SyntaxErrorになる
console.log(obj.0123);　//SyntaxErrorになる

基本はドット記法で書く。
例えば、console.log(obj)をブラケット記法で書くとconsole["log"](obj)になるが、
ドット記法のほうが読みやすい！

ただ、動的にプロパティ名を変更してアクセスしたい場合や、
不正なプロパティ名にアクセスした場合は、ブラケット記法が有効。

意味もなく記述の仕方を混在させないことが大切ですね。

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質