【解説】JavaScriptのGetter・Setterの使い方

記事内に広告を含みます

JavaScriptのGetter・Setterについて、自分用のメモとしてまとめてみました。

参考になれば幸いです。

【解説】JavaScriptのGetter・Setterの使い方
【解説】JavaScriptのGetter・Setterの使い方：まとめ

【解説】JavaScriptのGetter・Setterの使い方

・前提

・Getterの使い方

・Getterを使った後の代入

・Setterの使い方

・片方のみでも使用OK

・後からGetterとSetterを追加する方法

順に解説してきます。

前提

オブジェクトを作成したとき、その中のプロパティにアクセスしたい場合、関数にしてthisを使いますよね。

下記のように↓

const obj = {
  firstName: 'Tanaka',
  lastName: 'Taro',
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(obj.fullName()); //Tanaka Taro

そのオブジェクト内の名字と名前をthisを使い合体させて、関数にして値を出しました。

ただこれ「obj.fullName()」となっており、関数を実行してますよね。

「obj.fullName」と書いて、プロパティとしてアクセスしたいというときもあるかと。

その時に使えるのがGetterになります。

Getterの使い方

Getterを使えば、関数をプロパティのように使うことができます。

使い方は関数名の前に「get」と記述するだけ。

const obj = {
  firstName: 'Tanaka',
  lastName: 'Taro',
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(obj.fullName); //Tanaka Taro

これで「obj.fullName」のように()なしで、プロパティのようにアクセスすることができちゃいます。

ちなみに下記のような書き方ではエラーが出るため注意。

// NG
get fullName: function {
  return `${this.firstName} ${this.lastName}`;
},

Getterを使った後の代入

先ほどのGetterに代入した場合、エラーが起きてしまいます。

const obj = {
  firstName: 'Tanaka',
  lastName: 'Taro',
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};

obj.fullName = 'Yamada Taro'; // TypeError: Cannot set property fullName of 〜〜

つまりこのままでは代入できません。

ここで使えるのがSetterになります。

Setterの使い方

Setterを使えば代入したときに、指定した関数を実行することができます。

使い方は関数名の前に「set」と記述するだけ。
ちなみに名前はGetterと同じでも大丈夫です。

set 関数名(パラメータ) {
  
},

また第1パラメータにて、代入した値を取ることが可能です。

使い方の例がこちら↓

const obj = {
  firstName: 'Tanaka',
  lastName: 'Taro',
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(newFirstName) {
    this.firstName = newFirstName;
  },
};

obj.fullName = 'Yamada';

console.log(obj.fullName); //Yamada Taro

「Yamada」という値が第1パラメータに入り、firstNameに入れております。

これで新たな値を代入することができました。

片方のみでも使用OK

またGetterとSetterは片方のみの使用でもOKです。

const obj = {
  firstName: 'Tanaka',
  lastName: 'Taro',
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
};

console.log(obj.fullName); //Tanaka Taro

const obj = {
  firstName: 'Tanaka',
  lastName: 'Taro',
  set fullName(newFirstName) {
    this.firstName = newFirstName;
  },
};

obj.fullName = 'Yamada';

console.log(obj.firstName); //Yamada

後からGetterとSetterを追加する方法

後からオブジェクトに対して、GetterとSetterを追加する方法は「Object.defineProperty」を使うことです。

書き方がこんな感じ↓

Object.defineProperty(obj, 'プロパティ名', {
  get: function() {
    //処理
  },
  set: function(パラメータ) {
    //処理
  }
})

ちなみにこの場合は、省略のメソッドではなく「get: function()」と書いても大丈夫です。

実際に後から追加したコードがこちら↓

const obj = {
  firstName: 'Tanaka',
  lastName: 'Taro',
};

Object.defineProperty(obj, 'fullName', {
  get: function() {
    return `${this.firstName} ${this.lastName}`;
  },
  set: function(newFirstName) {
    this.firstName = newFirstName;
  }
})

obj.fullName = 'Yamada';

console.log(obj.fullName); // Yamada Taro