ドット記法とブラケット記法の使い分け

はじめに

GAS（Google App Script）の学習を進める中でドット記法だとエラーになるのに対し、ブラケット記法だと正常に動作するシーンに遭遇した。
ドット記法とブラケット記法の使い分けが気になったので、調べてまとめる。

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

二つの記法は、オブジェクト内のプロパティを用いて、値にアクセスするための記法である。
基本的には同じ使い方で問題ないとされているがオブジェクトのプロパティを、変数や定数を仲介してアクセスするときは扱いに注意する必要がある。

qiita.js

let student = {};
student.name = 'Tom';
student['age'] = 20;
console.log(student); //　→　{ name: 'Tom', age: 20 }

上のコードより、直接プロパティを指定する場合はどちらの記法でも問題ないことがわかる。

qiita.js

let student = {name: 'Tom', age: 20, gender: 'male'};
for (let prop in student) {
    console.log(student.prop); // undefined → undefined → undefined
    console.log(student[prop]); // Tom → 20 → male
    console.log(student['prop']); // undefined → undefined → undefined
}

しかし、上のように変数・定数を用いてオブジェクトのプロパティにアクセスする際に、ドット記法だと出力がundefinedとなる。

この内容については、文系大学生のためのJavascript入門で以下のように説明されています。

ドット記法では、プロパティにアクセスする際に引用符を付けないため、obj.prop と記述したときに「prop」がプロパティ名なのか定数名なのか区別できません。

ブラケット記法だと、student[prop]とstudent['prop']のようにプロパティと変数・定数の区別がつく。

まとめ

オブジェクトのプロパティに、変数・定数を介してアクセスする際にはドット記法ではなく、ブラケット記法を用いる。

参考にしたサイト

「文系大学生のためのJavascript入門」
https://zenn.dev/ojk/books/intro-to-javascript/viewer/js-object