アクセサとは
オブジェクトの中のプロパティの値を取り出したり、変更したりする関数のこと。
javascript
const obj = {
_name: "John"
}
const result = obj._name
console.log(result) // "John"
上記のコードを見ると、objの中にある_nameプロパティを参照してコンソール出力をするコードである。
持っている値を出力するだけのことですが、持っている値が変更される恐れもある。
javascript
const obj = {
_name: "John"
}
obj._name = "Sam"
const result = obj._name
console.log(result) // "Sam"
上記のようにobj._nameに直接アクセスしてSamを代入して値を上書きしているため、resultも変わってしまうことがわかる。
この問題を解決するため必要なのがアクセサである。
アクセサを利用し得て、プロパティの値をアクセサを持って参照・変更できるようにすれば、obj._nameの値を保証することができる。
アクセサの種類（getterとsetter）
アクセサにはgetterとsetterの２種類ある。
getter
値を取得するプロパティ
javascript
const obj = {
_name: "John",
get name() {
return this._name
}
}
const result = obj.name
console.log(result) // "John"
ここのコードを見ると_nameに直接アクセスして値を取得せず、nameというgetterを利用して取得している。
setter
値を変更するプロパティ
javascript
const obj = {
_name: "John",
get name() {
return this._name
},
set name(value) {
this._name = value
}
}
obj.name = "Sam"
const result = obj.name
console.log(result) // "Sam"
上記のコードでは_nameの値を変更する際、同名のnameのsetterを持って変更している。
なお、setterのnameはプロパティであるため、新しい値をセットする際には、以下のように書く。
javascript
obj.name = "Sam"
// ✖︎obj.name("Sam")
まとめると、ある特定のプロパティに直接アクセスして値を取り出したり変更せず、アクセサを持って行うことがgetterとsetterの役割である。
getterとsetterを使う利点
- あるスコープ内の値に外部からアクセスを制御するため、値の状態を管理することができる。
- 値にアクセスする前に検証を行うことができる。