【Tips】ドット記法と、ブラケット記法の使い分け
技術約3分で読めます
この記事でわかること
- ドット記法では書けないケース（変数キー・特殊文字・数字始まり）の具体例
- ブラケット記法で変数を使うときにクォートを付けてはいけない理由
- 場面ごとの使い分けと、速度差を気にしなくていい理由
JavaScript でオブジェクトのプロパティを読み書きしたことがあれば十分です。
概要
この記事では、ドット記法とブラケット記法についての説明や、各々の違いと使い分けについてまとめたいと思います。
以降、次のオブジェクトを例に説明します。
const res = { count: "100", status: "200" };ドット記法
この中から count の値を取り出すとすると、ドット記法では下記のように書けます。
res.count // "100"シンタックスが簡潔で読みやすく、最も一般的に使われる書き方です。ただし、次の制約があります。
- プロパティ名をその場で直書きする必要があり、変数で指定できない
- プロパティ名にスペースやハイフンなどの特殊文字を含められない
- 数字から始まるプロパティ名には使えない
ブラケット記法
同じものをブラケット記法で取り出すとこうなります。
res['count'] // "100"ドット記法では書けなかったケースがこちらでは書けます。
// 特殊文字や数字始まりのキー
res['user-name'];
res['1st'];
// 変数でキーを指定する（クォートは不要）
const key = 'count';
res[key];
// 文字列を組み立ててキーにする
const num = 1;
res[`item${num}`];注意
変数を使うときは res[key] のようにクォートを付けません。res['key'] と書くと、変数の中身ではなく「key」という名前のプロパティを探してしまいます。また、文字列を組み立てるときはバッククォート（ ` ）で囲むテンプレートリテラルを使います。
一方でデメリットもあります。
- キーを文字列で書くので、タイプミスしてもエディタや型チェックが気づきにくい（実行して
undefinedが返って初めてわかる） - エディタのリネームや参照検索が効かない
使い分け
| 場面 | どちら |
| キーが固定で、普通の名前 | ドット記法 |
| キーを変数で渡す・実行時に決まる | ブラケット記法 |
| キーにスペース・ハイフン・数字始まりが含まれる | ブラケット記法 |
| 配列の要素を取る | ブラケット記法（`arr[0]`）</td>
</tr> </table> callout{icon="💡" color="green_background"} 「ブラケット記法は遅い」と言われることがありますが、現在の JavaScript エンジンでは実測できる差はほぼありません。速度を理由に選ぶ場面はまずないので、上の表のとおり可読性と必要性で選んで問題ありません。まとめ覚えておくべきは、固定のプロパティ名にはドット記法、変数や特殊文字を含むプロパティ名にはブラケット記法という点だと思っています。 感想PRを投げた時にご指摘をいただき、調べた内容をまとめてみたのですが、結構学びになりました。普段使っている記法ですが、メリデメあるので、今後はしっかり考えて選びたいと思います。 あとちょっと競プロが懐かしくなったので来年ちゃんとやろうと思います(多分) 更新履歴
|
