[ javascript ] Getter 와 Setter 함수

객체 안에는 Getter함수와 Setter함수를 설정할 수 있습니다

Getter함수와 Setter함수를 사용하게 되면 특정값을 바꾸려고 하거나 변경하려고 할 때 원하는 코드를 실행할 수 있습니다

Getter 함수

const number = {
  a: 1,
  b: 2,
  get sum() {
    console.log('sum 함수가 실행되었습니다');
    // get함수에서는 어떠한값을 무조건 반환해줘야합니다
    return this.a + this.b; // this가 속한객체의 a(1)와 b(2)
  }
};

number.a = 5;
console.log(number); // 결과 Object { a: 5, b: 2}
console.log(number.sum); // 결과 'sum 함수가 실행되었습니다', 7
number.b = 5;
console.log(number.sum); // 결과 'sum 함수가 실행되었습니다', 10

Setter함수

const dog = {
  // setter 함수와 이름이 겹치지 않게 _(언더바) 를 붙엿습니다
  _name: '멍멍이',
  // setter 함수는 파라미터를 설정해 줘야 합니다
  set name(value){
    console.log('이름이 바뀝니다..' + value);
    this._name = value;
  }
  // getter 와 setter 함수는 같은 이름으로 사용할수도 있지만 1개의 함수를 2개가 다 작동해서 비효율 적이다
  get name(){
    return _name;
  } 
};

console.log(dog._name); // 결과 멍멍이
// 뭉뭉이라는 문자값을 파라미터로 받아 _name의 값을 바꿉니다
dog.name = '뭉뭉이'; // 결과 '이름이 바뀝니다..뭉뭉이'
console.log(dog._name); // 결과 뭉뭉이

다른 예시

const number = {
  _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) {
    this._a = value;
    // sum값을 업데이트 하기위해 calculate함수를 호출해줍니다
    this.calculate();
  },
  set b(value) {
    this._b = value;
    // sum값을 업데이트 하기위해 calculate함수를 호출해줍니다
    this.calculate();
  },
};

console.log(number.sum); // 결과 : 3
number.a = 5; // 결과 : 'calculate' _a(5) + _b(2) = sum(7)
number.b = 7; // 결과 : 'calculate' _a(5) + _b(7) = sum(12)
number.a = 9; // 결과 : 'calculate' _a(9) + _b(7) = sum(16)
console.log(number.sum); // 결과 : 16