(JS) Getter 함수 & Setter 함수

const numbers = {
	a : 1,
	b : 2
}

numbers.a = 5;
console.log(numbers.a); // 5 출력

위와 같이 직접 맴버에 접근해서 객체의 특정 값을 직접적으로 바꿀 수 있다.
하지만 위 방법과 다르게 getter함수와 setter함수를 사용하는 방법이 있다.

getter함수와 setter함수를 사용하면 특정 값을 조회하거나, 변경하려고 할때 원하는 코드를 실행할 수 있다.

- getter : to access properties
- setter : to change(or mutate) properties

getter, setter를 단순히 값 저장용이라고 생각하기 보다는 캡슐화, 정보은닉 관점에서 생삿하는 것이 바람직하다.

참조링크

Getter 함수

const numbers = {
	a : 1,
	b : 2,
	get sum() { //함수명 앞에 get 키워드 붙인다
		console.log('sum 함수가 실행됩니다!');
	return this.a + this.b;	//Getter 함수에서는 무조건 어떤 값을 반환해줘야 함
									//여기서 this는 그 스스로 즉, numbers 의미한다
	}
};

console.log(numbers.sum); //'sum 함수가 실행됩니다! \n3' 출력
numbers.b = 5;
console.log(numbers.sum); //'sum 함수가 실행됩니다! \n3' 출력

단지 numbers.sum을 조회했을 뿐인데, 함수가 실행되고 그 결과값이 출력되는 것을 볼 수 있다. 이런식으로 Getter 함수는 특정 값을 조회 할 때 우리가 설정한 함수로 연산된 값을 반환한다.

다른 getter 예제

const person = {
  firstName: "Yang",
  lastName: "Hodoo",
  get fullName(){
    return `${person.firstName} ${person.lastName}`;
  }
};

console.log(person.fullName);

객체 안 fullNama() 앞에 get을 붙임으로써
콘솔에 출력할 때 person.fullName이라고 쓸 수 있다.
fullName을 properties처럼 사용할 수 있게 된 것이다.

Setter 함수

const numbers = {
  _a: 1,
  _b: 2,
  sum: 3,
  calculate() {
    console.log('calculate');
    this.sum = this._a + this._b;
  },
  get a() {
    return this._a;
  },
  get b() {
    return this._b;
  },
  set a(value) {
    console.log('a가 바뀝니다.');
    this._a = value;
    this.calculate();
  },
  set b(value) {
    console.log('b가 바뀝니다.');
    this._b = value;
    this.calculate();
  }
};

console.log(numbers.sum); // 3
numbers.a = 5; // a가 바뀝니다. calculate
numbers.b = 7; // b가 바뀝니다. calculate
numbers.a = 9; // a가 바뀝니다. calculate
console.log(numbers.sum); // 16
console.log(numbers.sum); // 16
console.log(numbers.sum); // 16

Setter 함수를 설정 할 때에는 함수의 앞부분에 set키워드를 붙입니다.

Setter 함수를 설정하고 나면, numbers.a = 5이렇게 값을 설정했을 때 5를 함수의 파라미터로 받아오게 됩니다. 위 코드에서는 객체 안에 _a, _b라는 숫자를 선언해주고, 이 값들을 위한 Getter와 Setter 함수를 설정해주었습니다.

전에 만든 객체에서는 numbers.sum이 조회 될 때마다 덧셈이 이루어졌지만, 이제는 a 혹은 b 값이 바뀔 때마다 sum값을 연산합니다.

다른 setter 예제

const person = {
  firstName: "Yang",
  lastName: "Hodoo",
  get fullName(){
    return `${person.firstName} ${person.lastName}`;
  },
  set fullName(value){
    const parts = value.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1]
  }
};

person.fullName = 'Kim wero'
console.log(person.fullName);

출처

벨로퍼트 모던 자바스크립트
JavaScript Getter & Setter 이해