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
'WEB > Java Script' 카테고리의 다른 글
[Java Script] for - of / for - in / 객체의 키와 값을 받아오는 방법/ 배열 형태로 출력하는 방법 (0) | 2021.04.23 |
---|---|
[Java Script] 배열 / 배열의 길이 / 배열안의 값 호출/ 배열에 삽입 (0) | 2021.04.23 |
[Java Script] 함수의 작성 / 화살표 함수 (0) | 2021.04.22 |
[Java Script] 논리 연산자를 이용한 조건문 평가 / if && || ! / 삼항 연산자/ switch (0) | 2021.04.22 |
[Java Script] 데이터 타입 / Boolean Null Undefined Number String Symbol (0) | 2021.04.22 |