2022/10/13 (更新日: 2022/10/24)

getterとsetter

JavaScript

そもそも

使わなくても良い機能

getterとは何か

メソッドをプロパティの様に扱うためのもの

const calculator = {
	size: 60,
	member: 4,
	// totalにsize*memberの値を設定したい時
	// 通常
	total() {
		return this.size * this.member;
	} 
	// getterを使う
	get total() {
		return this.size * this.member;
	}
}
// 通常のアクセス
console.log(calculator.total()); // 240
// getterで記述したアクセス
console.log(calculator.total); // 240

setterとは何か

getterに値をセットするために用意するもの

const calculator = {
	size: 60,
	member: 4,
	get total() {
		return this.size * this.member;
	},
	// ↓これがsetter
	set total(newValue) {
		this.member = newValue / this.size;
	}
}
// setterが定義してあるので下記がエラーにならず、600がsetterのnewValueに入る
calculator.total = 600;
// setterが動作してmemberの値が更新され、totalの値も変更される
console.log(calculator.total); // 600
console.log(calculator.member); // 10

• Tweet