getter, setter 문법은 오브젝트 내의 함수들을 괄호없이 쓸 수 있게 만들어주는 키워드인데, 깊숙히 들어가면 데이터의 무결성을 보존하기 위해 쓰는 키워드라고 보면 된다. (원본 데이터는 불변(immutable)해야한다.)
var people = {
name : 'kim';
age : 30;
}
예시로 위의 오브젝트에서 age + 1을 반환하는 함수를 만든다고 해보자.
var people = {
name : 'kim';
age : 30;
}
nextAge(){
return this.age + 1
}
- people.age + 1 라고 프로퍼티를 직접 이용하면 될 것을 굳이 귀찮게 function을 따로 만들 필요가 있는것일까?
- 답은 그렇다. 오브젝트 내의 데이터가 복잡할수록 human.age + 1 처럼 property를 직접 이용하기 보다는 function을 이용하는 것이 data를 꺼내기 더 쉽다.
- 특히 매우 긴 object 안에서 원하는 자료 몇개만 뽑고 싶을 떄 미리 function을 만들어놓으면 쉽게 data를 꺼낼 수 있다.
var people = {
name : 'kim';
age : 30;
}
setAge(age){
this.age = parseInt(age);//parseInt는 문자열을 숫자로 바꿔주는 자바스크립트의 내장함수
}
people.setAge('40');
- 꺼내는 것과 비슷하게 수정할때도 함수를 이용한다.
- setAge라는 함수를 오브젝트 내에 추가했는데, 이 함수는 파라미터를 한개 입력할 수 있는데 그 파라미터를 그대로 this.age에 집어넣는 역할을 한다.
- 이렇게하면 내부에 있는 변수를 직접 건드리지 않아서 실수를 방지할 수 있다. 한 겹의 안정장치를 만든다고 보면 된다.
var people = {
name : 'kim';
age : 30;
}
setAge(age){
this.age = parseInt(age);//parseInt는 문자열을 숫자로 바꿔주는 자바스크립트의 내장함수
}
위에서 setAge(40)이렇게 사용하는 것은 데이터를 집어넣기 조금 복잡한 면이 있다. 이를 좀 더 간단히 사용하기 위해 get/set 키워드를 사용해보자.
var people = {
name : 'kim';
age : 30;
}
set setAge(age){
this.age = parseInt(age);
}
people.setAge = 40;
이렇게 set 키워드를 함수 옆에 추가해주면 등호로 데이터를 입력할 수 있다. 이렇게 set이 붙은 함수들은 setter라고 한다.
var people = {
name : 'kim';
age : 30;
}
get nextAge(){
return this.age + 1;
}
console.log( people.nextAge );
함수를 꺼낼때는 이렇게 get 키워드를 출력하면 소괄호 없이 직관적으로 데이터를 꺼낼 수 있다. 이렇게 get이 붙은 함수들은 getter라고 한다.
class person{
constructor() {
this.name = 'Park';
this.age = 20;
}
get getAge() {
return this.age + 1;
}
set setAge(age) {
this.age = age;
}
};
var person1 = new person();
console.log(person1.getAge);
person1.setAge = 50;
console.log(person1);
클래스에서는 이렇게 인스턴스 앞에 써주면 동일하게 사용 가능하다.