【JS・小ネタ】オブジェクトからプロパティを取り出す２つの方法

背景

僕は仕事でJSを使っていたのだ。
そこで、オブジェクト（所謂ディクショナリ）を使っていた。

const obj = {element1: 1, element2: 2}
const element1 = obj['element1']

こんな感じでオブジェクトからプロパティを取り出していたのだ。

ただ別の日、プライベートで僕は見てしまったんだ。
別の方法でオブジェクトからプロパティを取り出しているコードを。

const obj = {element1: 1, element2: 2}
const element2 = obj.element2

一体これは何なんだ？
どんな違いがあるというんだ？

ブラケット記法とドット記法

どうも調べてみると、僕が書いていた記法は「ブラケット記法」、もう一方を「ドット記法」と言うらしい。
機能的にも少し違いがあるみたい。

ブラケット記法

ブラケット記法の特徴としては、

• どんな文字列がキーで使われていても使用できる。
• 変数を用いてプロパティにアクセスすることもできる。

const obj = {element1: 1, element2: 2}
const element1 = obj['element1']

// element2にアクセス
const key = 'element2'
const element2 = obj[key]

ドット記法

ドット記法の特徴は、

• 英数字やアンダースコアのみでキーが構成されている場合に使用できる。
• 変数を使用してアクセスすることはできない。
• キーが数字始まりがある場合もNG。

const obj = {element1: 1, element2: 2, 'element-3': 3}
const element2 = obj.element2

// element2にアクセス
const key = 'element-3'
let element3 = obj[key] // ⇒エラー
let element3 = obj.element-3 // これもエラー

おわりに

これ、ブラケット記法にしておけば間違いないのでは、と思ってしまった...
ただドット記法もよく見かけるし、どちらがいいんだろうね？