get과 set을 사용하여 객체의 특정 값을 조회하거나 변경할 수 있다.
Getter 함수
- getter 함수는 특정 값을 조회 할 때 설정한 함수를 실행하고 연산된 값을 리턴한다.
- 함수 이름 앞에
get키워드를 붙이면 된다.
const numbers = {
a: 1,
b: 2,
get sum() {
return this.a + this.b;
}
};
console.log(numbers.sum);
numbers.b = 5;
console.log(numbers.sum);위와 같이 코드를 작성하면 b 값을 변경하고 나서 sum 함수를 numbers.sum() 다음과 같이 호출하지 않고도 numbers.sum만 작성하여 조회해도 값의 변화가 나타난다.
Setter 함수
- setter 함수는 특정 값을 변경 하고자 할때 사용한다.
- 함수 이름 앞에
set키워드를 붙이면 된다.
const numbers = {
a: 1,
b: 2,
sum: 3,
calculate() {
this.sum = this.a + this.b;
},
get num1() {
return this.a;
},
get num2() {
return this.b;
},
set num1(value) {
this.a = value;
this.calculate();
},
set num2(value) {
this.b = value;
this.calculate();
}
};위는 numbers객체를 생성한 코드이다. setter 함수를 사용하게 되면 numbers.num1 = 5 이렇게 값을 설정했을 때 5 를 함수의 파라미터로 받아오게 되어 numbers객체의 a의 값을 5로 설정하게 될 것이다. 아래 코드를 사용하여 이를 확인해 볼 수 있다.
console.log(numbers.sum);
numbers.num1 = 5;
console.log(numbers.sum);
numbers.num2 = 7;
console.log(numbers.sum);출력 결과
3
7
12
첫 번째 줄이 실행되면 sum의 초기 값 3이 출력된다.
두 번째 줄이 실행되면 setter함수인 num1함수가 실행되어 a의 값에 5가 저장된다. 이때 함수 내에서 calculate 함수를 실행하게 되니 sum값도 7 (5+2)로 업데이트 된다.
세 번째 줄이 실행되면 현재 sum값인 7이 출력 된다.
마찬가지로 네 번째 줄이 실행되면 setter함수인 num2함수가 실행되어 b의 값에 7가 저장된다. 이때 함수 내에서 calculate 함수를 실행하게 되니 sum값도 12 (5+7)로 업데이트 된다.
마지막 줄이 실행되면 현재 sum값인 12이 출력 된다.
여기서 의문이 들 수 있다.
왜 getter와 setter 함수를 쓸까
- 이는 캡슐화, 은닉화와 관련이 있다.
위의 예제를 보면 numbers의 a와 b에 직접 접근하지 않고 num1, num2 키워드로 값에 접근하였다.
또한 해당 값이 변하면 calculate를 실행하게 하여 sum값도 함께 업데이트 해주었다.
만약, a와 b를 직접 변경하였다면 sum 값을 바꾸는 함수를 한 번 더 호출해줘야 했다.
사용자는 실제 데이터의 이름을 알 수 없으니 데이터를 보호할 수 있고 데이터의 값이 변하면 해당 데이터를 이용하는 다른 데이터까지 연쇄적으로 업데이트가 가능하기 때문에 setter와 getter함수를 사용한다.
