getter와 setter
getter와 setter은 오브젝트 내의 함수를 괄호 없이 사용할 수 있게 만들어주는 문법
자세히 얘기하면 데이터의 무결성을 보존하기 위해 사용하는 키워드이다.
원본 데이터는 immutable해야하는데
데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다루는 것이다.
(원본 데이터의 변경을 막기 위해)
var 사람 = {
name : 'Kim',
age : 30,
}이런 object 데이터가 있다고 치고
age를 +1 하고 싶다고하면
사람.age +1;이렇게 하면 될 것 같다.
하지만 이렇게 함수를 만들어 age값을 변경 할 수 있는데
var 사람 = {
name : 'Kim',
age : 30,
nextAge(){
return this.age + 1
}
}위 방식의 장점은
-
object 안의 데이터가 복잡할 수록 함수 만들어놓는게 데이터 꺼내기 쉽다.
-
내부에 있는 name, age 변수를 건드리지 않아서 실수를 방지할 수 있어서 안전하다.
함수로 object 데이터를 수정하는 방법
object에 있는 age를 수정하고 싶다면 사람.age = 40; 이렇게 수정하여도 되지만
이 방법은 어떠한 안전장치도 없기 때문에
(안전장치가 없다는 뜻은)
사람.age = '40';이렇게 해도 age값은 '40'으로 변경이된다. 즉 원본 데이터가 오염이 된다는 것이다.
그래서 함수를 사용하여 변경하는데
var 사람 = {
name : 'Kim',
age : 30,
setAge(나이){
this.age = parseInt(나이)
}
}이렇게 함수를 사용하여 변경을 하는 이유는
- 내부에 있는 name, age 변수를 직접 건드리지 않아서 실수를 방지할 수 있습니다.
- 숫자가 아닌 문자를 입력하여도 parseInt 함수를 이용해 숫자로 변경 가능하다
하지만 함수 쓰기 복잡하다면 get/set 키워드를 붙이면 되는데
var 사람 = {
name : 'Kim',
age : 30,
set setAge(나이){
this.age = parseInt(나이)
}
}
사람.setAge = 40; //set 키워드를 추가하면 이렇게 함수를 사용가능▲ setAge() 함수 만들 때 왼쪽에 set이라는 키워드를 추가하면
이제 등호로 데이터를 입력하거나 할 수 있다.
set을 붙인 함수들을 setter라고 하며 데이터를 수정(set)하는 함수라는 뜻이다.
var 사람 = {
name : 'Kim',
age : 30,
get nextAge(){
return this.age + 1
}
}
console.log( 사람.nextAge ) //get 키워드를 추가하면 이렇게 함수를 사용가능▲ nextAge()라는 함수를 만들 때는 get 키워드를 사용한다.
그러면 이제 소괄호 없이 nextAge를 사용해서 데이터를 꺼낼 수 있다.
get을 붙인 함수들을 getter라고 하며 데이터를 가져오는(get) 함수라는 뜻
get/set의 규칙
set 함수 : 데이터를 입력해서 수정해주는 함수니까 파라미터가 한개 꼭 존재해야한다.
get 함수 : 파라미터가 있으면 안되고 함수 내에 return을 가져야한다.
간단하게 하면
데이터를 뽑아주는, 가져와주는, get 해주는 함수들은 get
데이터를 입력해주는, 수정해주는, set 해주는 함수들은 set을 사용하면 된다.
class에서 사용하는 get/set
class 사람 {
constructor(){
this.name = 'Park';
this.age = 20;
}
get nextAge(){
return this.age + 1
}
set setAge(나이){
this.age = 나이;
}
}
var 사람1 = new 사람();class 안의 함수들을 getter/setter로 만들어 사용하고 싶으면 위처럼 사용하면된다.
이제 새로 생성된 object인 사람1은
사람1.nextAge;
사람1.setAge = 50;
이렇게 사용할 수 있다.
