【JavaScript】ドット記法・ブラケット記法について

JavaScriptにはオブジェクトのプロパティにアクセスする方法が2種類あります。
使い方や違いを理解できたのでメモしたいと思います。

ドット記法

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

const obj = {};
obj.name = 'taka'; // objのプロパティをセット
obj.hello = function(){
    console.log(`Hello,${this.name}`);
}

console.log(obj.name); // taka
obj.hello(); // Hello,taka

オブジェクトとプロパティを.（ドット）で繋げることで、値の取得やメソッド実行ができます。

ブラケット記法

[ ]（ブラケット）を使ってプロパティにアクセスする方法です。

const obj = {};
obj['name'] = 'taka'; // objのプロパティをセット
obj['hello'] = function(){
    console.log(`Hello,${this.name}`);
}

console.log(obj['name']); // taka
obj['hello'](); // Hello,taka

メソッドも[ ]の後に()を付けて実行できます。

ドット記法とブラケット記法の違い

ブラケット記法は、プロパティ名に変数を与えることができます。ドット記法ではできません。

const propName = 'name'; // 変数を用意

const obj = {};
obj[propName] = 'taka'; // プロパティ名に変数を使う
console.log(obj); // {name: "taka"}

obj.propName = "taka"; //ドット記法で変数を使ってもプロパティ名になる
console.log(obj); // {name: "taka",propName: "taka"}

そのため、ブラケット記法はループなど動的にプロパティ名を変更したい場合に便利です。

例えば、配列にキーを格納して、オブジェクトの中身を取得した時など。

const key = ['html','css','javascript'];
const obj = {
    html:'骨組み',
    css:'装飾',
    javascript:'動作'
}

key.forEach(function(key){
    let result = key + 'は、Webページの' + obj[key] + 'を作ります。'
    console.log(result);
});

まとめ

ドット記法とブラケット記法の特徴、違いを記述しました。
2種類の方法がありますが、可読性の点から不必要に混在して使わない方が良さそうですね。

参考

https://ichigo-pantsu.site/javascript-dot-bracket/
https://harakotan.hatenablog.jp/entry/2015/05/17/004707
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors