WEB/Java Script

[Java Script] getter함수 , setter함수

자바칩 프라푸치노 2021. 4. 22. 23:50

getter setter

 

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

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

 

객체에 값을 대입하면 값이 변한다.

당연히


const numbers ={
  a:1,
  b:2,
  get sum(){
    console.log('sum 함수가 실행됩니다!');
    // getter에서는 특정 값이 무조건 반환되어야한다.
    return this.a + this.b;
  }
};

console.log(numbers.sum);
// 조회만 했을 뿐인데 실행이 된다.

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

 

이제는 getter함수를 보자

객체 안에 getter함수를 정의해주었다.

getter에서는 무조건 return이 있어야한다.

 


const dog = {
  _name : '멍멍이',
  set name(value){
    // 파라미터로 무조건 값을 설정해주어야한다.
    console.log('이름이 바뀝니다..' + value);
    this._name = value;
    
  }
}

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

 

이제 setter함수를 보자

setter함수는 값을 set하는 것이기 때문에 파라미터로 어떤 값을 넣어야한다.

dog.name 에 뭉뭉이를 넣으니 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){
    this._a = value;
    this.calculate();
  },
  set b (value){
    this._b = value;
    this.calculate();
  }
};

console.log(numbers.sum);
// setter함수를 호출했다는 뜻이다.
// getter함수는 어떤 값을 조회, setter는 수정하기에 유용하다
numbers.a = 5;
numbers.b = 9;
console.log(numbers.sum);

이 코드를 보면 getter와 setter함수가 정의되어있다.

값을 새로 대입할때마다 setter함수가 실행된다.

 

728x90