【JavaScript ES6学習】オブジェクトのPrivacy, Getters, Settersについて

2019/05/29 2019/06/17

【JavaScript ES6学習】基礎文法編目次

codecademyで学習したことをまとめています。
プログラミング初心者の私が学習しながら書いた、完全に自分用のメモみたいなものなので、他人が見ると意味不明だったり、間違いがある可能性があるのでご注意ください。

codecademyは無料でかなりのことが学習できる素晴らしいサイトですが、英語です。
なのでこの記事に書かれている日本語の用語も間違っているかもしれません。

codecademyのコードをそのまま載せるのはさすがにまずいと思い、微妙に改変しています。

今回学習した項目

codecademy
JavaScript
Lesson 8 Privacy, Getters, Setters

Privacyなプロパティ

直接変更してほしくないプロパティもある。
例えば次の例は、銀行口座の残高ですかね。
このようなプロパティには頭に｢_(アンダーバー)｣をつける慣習があるようですが･･･

const bankAccount = {
  _amount: 1000
}

｢_｣を付けていても、こんなふうに残高を直接操作出来てしまいます。

bankAccount._amount = 1000000;

Getterを使ってプロパティを取得する

Getter methodを使うことで、オブジェクトのプロパティの値をチェックしたり編集したりした上で取り出せる、ということですかね？

const person = {
  _firstName: 'Taro',
  _lastName: 'Tanaka',
  get fullName() {
    if (this._firstName && this._lastName){
      return `${this._firstName} ${this._lastName}`;
    } else {
      return 'Missing a first name or a last name.';
    }
  }
}

// To call the getter method: 
person.fullName; // 'Taro Tanaka'

上の例では、“_firstName“と”lastName“のプロパティはオブジェクト外から直接呼び出さないPravacyなプロパティと言う意味で頭に”“を付けています。

“_“をつけることで、｢このプロパティは直接値を変えたりしない｣ということを、コードを読んだ人に明示的に伝えることができる、みたいなことですかね。
ただ動けばいい、ってのならこんな事しなくてもいいと思います。

これらを呼び出すためにはGetter methodの“fullName”を使うという意図みたいです。
Getter method内では、_firstNameと_lastNameが両方存在するかをチェックしています。
両方存在していたらフルネームを返し、片方または両方存在してなかったら’Missing a first name or a last name.’と言うメッセージを返します。

console.logはしてないので、このまま実行しても何も表示はされません。

最後の行でメソッドを呼び出していますが、このとき“Set”とかを付ける必要はありません。

注意点としては、Getter methodを呼び出すときは“()”が不要です。
オブジェクトのプロパティを呼び出すように使うことができるってことですね。

Settersを使ってプロパティを書き換える

Setter methodも、Getter methodと同じようにオブジェクトのプロパティに値を代入するかのように扱え、間違った値が入力されてないかのチェックを行うことができる、みたいな感じだと思います。

以下の例では、“_age“の値をに直接いじる代わりに、Setter methodの”age“を通して操作できるようにしています。

const person = {
  _age: 35,
  set age(newAge){
    if (typeof newAge === 'number'){
      this._age = newAge;
    } else {
      console.log('You must assign a number to age');
    }
  }
};

Setter methodの“age”を実際に使うとこんな感じ。

person.age = 25;
console.log(person._age); // Logs: 25
person.age = '25'; // Logs: You must assign a number to age

数値の“25”を代入すると“_age“に25が入り、文字列の”25“を入れるとメッセージを表示します。
Setter methodをかます事で、値のチェックが可能になるというわけですね。

Getter methodとSetter methodは同じ名前でも大丈夫みたい

const person = {
  _age: 35,
  get age(){
    if (typeof this._age === 'number'){
      return this._age;
    } else {
      return 'Age is not a number.';
      
    }
  },

  set age(newAge){
    if (typeof newAge === 'number'){
      this._age = newAge;
    } else {
      console.log('You must assign a number to age');
    }
  }
};

person.age = 25;
console.log(person.age);