getter: 객체의 속성(property)값을 반환하는 메서드
setter: 객체의 속성(property)값을 설정, 변경하는 메서드
const user = {
name: 'cho',
age: 30,
getName() {
return user.name;
},
setName(value) { //value -> kim
user.name = value;
}
}
console.log(user.getName()); // cho
user.setName('kim');
사용이유?
1. 객체 내부 속성에 직접 접근하지 않아서 정보 은닉에 좋다( 보안강화, 코드 안전성 )
2. 옳지 않은 값을 사전에 방지할 수 있다. -> if문을 사용해서 값을 필터링 할 수 있다.(아래 예시처럼)
const user = {
name: 'cho',
age: 30,
getAge() {
return user.age;
},
setAge(value) {
if(value > 100) {
console.error('나이는 100을 초과할 수 없습니다.')
return;
}
user.name = value;
}
}
user.setAge(400);
[사용법]
과거) get프로퍼티명() , set프로퍼티명()
요즘) 객체 안에서 속성 이름 앞에 get,set만 붙여서 정의
const user = {
name: 'cho',
age: 30,
get userName() {
return user.name;
},
set userName(value) {
user.name = value;
}
}
console.log(user.userName); //cho, 프로퍼티 호출 형식
이때의 getter,setter은 함수 호출형식이 아니다. 일반 프로퍼티 처럼 접근해야 사용가능하다.
** 읽고 쓸 순 있지만 실제로는 존재하지 않는다는 것을 알아야한다.
[프로퍼티 종류]
- 데이터 프로퍼티 : 일반적인 property(key,value의 형태)
- 접근자 프로퍼티 : getter,setter라는 함수를 가지는 특수 프로퍼티
**javascript 객체 속성에 접근하듯이 접근자 프로퍼티를 호출하면, 함수호출 문법( setName() )이 아니더라도 함수 호출하는 것과 같다.
[주의점]
1.getter만 선언하지 말 것
2.setter 무한 루프
-> 접근자 프로퍼티의 이름을 중복이 되도록 하지 말 것
참고블로그)
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-getter-setter-%EB%9E%80
'자바스크립트' 카테고리의 다른 글
shift() & unshift() & Splice() (0) | 2022.11.13 |
---|---|
전개 연산자 (0) | 2022.11.11 |
javascript(class) (0) | 2022.10.22 |
javascript(constructor) (0) | 2022.10.20 |
javascript 공부(this) (0) | 2022.10.20 |