getter関数とsetter関数を✅

ポートフォリオ作成に着手してもうすぐ1ヶ月が経とうとしていますが、中々javascriptさんと仲良くなれなくてしゅんとしちゃってる今日この頃の俺です。

今回はセッターとゲッターについて学習していきます。

今一度セッターとゲッターについて復習しておくことで、今後のVuex学習に役立つと考えました。

プロパティとは

アクセサプロパティとデータプロパティという2種類に分類される。setterとgetterはアクセサプロパティにカテゴライズされる。

Getterとは

get 構文は、オブジェクトのプロパティを関数に結びつけ、プロパティが参照された時に関数が呼び出されるようにします。

returnがついているので、値を返す仕組みができている。

if文を定義したいときに使える。三項演算子で実装できるのなら、極力使いたくは無いかな。

const obj = {
  log: ['a', 'b', 'c'],
  get latest() {
    if (this.log.length === 0) {
      return undefined;
    }
    return this.log[this.log.length - 1];
  }
};

console.log(obj.latest);
// expected output: "c"
#下記のように書き換えることもできる
const obj = {
	log: ['a', 'b', 'c'],
	get latest(){
		this.log.length=== 0 ? undefined : this.log[this.log.length - 1]
  }
};

注意点

  • 数値または文字列による識別子を持つことができる。

this.log.length === 0のように、厳密等価演算子を使って数値同士、文字列同士を比較することができる。もちろん等価演算子も使うことができる。

  • 引数の数は 0 でなければならない。

get関数を定義するときに()のなかに何も入れてはいけない。今回だと、get latest()の()の中にはなにも入れてはいけない。

算出されたプロパティ名の使用

別で定義したプロパティと組み合わせて使用することもできる。

const expr = 'foo';
	#exprを使うときは、[]で囲む。
const obj = {
  get [expr]() { return 'bar'; }
};

console.log(obj.foo); // "bar"

ゲッター - JavaScript | MDN

Setterとは

set 構文は、あるオブジェクトプロパティを関数にバインドして、プロパティに設定しようとしたときに呼び出される関数に結びつけます。

setされたオブジェクトの値に対して関数を充てている。値をsetterが取り出すことはできない。

const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
};

language.current = 'EN';
language.current = 'FA';

console.log(language.log);
// expected output: Array ["EN", "FA"]

セッター - JavaScript | MDN

getterとsetterを複合してみる

o.c にアクセスした時にsetterが呼び出される。o.aは動的に変化されている。

var o = {
  a: 7,
  get b() {
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2;
  }
};

console.log(o.a); # 7
console.log(o.b); # 8 <-- この時点で get b() メソッドが開始される
o.c = 50;         #   <-- この時点で set c(x) メソッドが開始される
console.log(o.b); # 26
  • o.a — 数値
  • o.b — o.a + 1 を返すゲッター
  • o.c — o.c に設定される値を 1/2 にしたものを o.a に設定するセッター

まとめ

  • setterは値をセットする場所で、getterは値を取得する場所。
  • 基本的にsetterとgetterは同一function内で定義される。

オブジェクトでの作業 - JavaScript | MDN