본문 바로가기
개발자의 공부방/Frontend

javascript] getter setter

by 쥬니준 2021. 12. 29.
728x90
반응형

 

Getter와 Setter에 대해서 알아보자.

1. get 함수

const numbers = {
  a: 1,
  b: 2,
  get sum() {
    console.log('sum 함수 실행!')
    return this.a + this.b;
  }
};

console.log(numbers.a)
numbers.b = 5;
console.log(numbers.sum)

get 함수는 특정 함수를 조회하려고 할 때 특정 코드를 실행시키고 연산된 값을 받아서 사용할 수 있다.

 

numbers() 이런 식으로 사용하지 않아도 된다.

 

const dog = {
  _name: '멍멍이',
  set name(value) { //params를 무조건 설정해야한다.
    console.log('이름이 바뀐다' + value)
    this._name = value;
  }
};

console.log(dog._name);
dog.name = '뭉뭉쓰'
console.log(dog._name);

set 함수는 어떤 값을 설정할 때 마다 사용한다.

 

const numbers = {
  _a: 1,
  _b: 2,
  sum: 3,
  calculate() {
    console.log('계산기')
    this.sum = this._a + this._b;
  },
  get a() {
    return this._a;
  },
  get b() {
    return this._b;
  },
  set a(value) {
    this._a = value;
    this.calculate();
  },
  set b(value) {
    this._b = value
    this.calculate();
  }
}

console.log(numbers.sum);
numbers.a = 5;
console.log(numbers.sum)

이 간단한 로직은 get set을 활용한 것인데

 

calculate를 조회하면서 numbers a나 b에 값을 대입하고 덧셈을 해서 sum 이라는 변수에 값을 업데이트하게 되는 로직이다.

 

마지막 numbers.a 를 조회하면 알겠지만 값이 변해야지만 계산이 되는 것을 알 수 있다.

반응형

댓글0