[JS] getter/setter

Minyoung's Conference·2022년 10월 19일
0

JavaScript

목록 보기
20/28
post-thumbnail
동적인 계산이 필요하거나, 프로퍼티 값을 변경할 경우, 접근자 프로퍼티인 getter/setter를 사용한다.
this는 객체안에서 자기자신을 가리키기에 setter 메서드에서 사용된다. 
접근자 프로퍼티는 프로퍼티의 값을 갱신할 때 유효성을 검증하거나, 조건에 따라 다른 값을 반환하는 작업을 할 때 많이 사용한다. 

const obj = {
	count : 0,
	// count가 null이 아니고 0보다 큰 경우만 값을 갱신한다.
	set count(count){
		if(count != null && count > 0){
			this.count = count;
		}
	} 
}
// obj.count 에 3을 넣으면 
// maximum exceed error 72page
// 어떻게 사용하는가? 
// Object.defineProperty()를 사용해서 변경해주어야 하는가?
// obj.count = 3 이런식으로는 안되는가?

const obj = {
	count : 0,
	// count가 null이 아니고 0보다 큰 경우만 값을 갱신한다.
	set count(count){
		if(count != null && count > 0){
			this.count = count;
		}
	} 
}

Object.defineProperty(obj,'count', {
    writable: true,
    value: 3
})

console.log(obj.count);

이렇게 하니까 값이 3 나옴.

getter와 setter 똑똑하게 활용하기

getter와 setter를 ‘실제’ 프로퍼티 값을 감싸는 래퍼(wrapper)처럼 사용하면, 프로퍼티 값을 원하는 대로 통제할 수 있다.

아래 예시에선 name을 위한 setter를 만들어 user의 이름이 너무 짧아지는 걸 방지하고 있다. 실제 값은 별도의 프로퍼티 _name에 저장된다.

let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      alert("입력하신 값이 너무 짧습니다. 네 글자 이상으로 구성된 이름을 입력하세요.");
      return;
    }
    this._name = value;
  }
};

user.name = "Pete";
alert(user.name); // Pete

user.name = ""; // 너무 짧은 이름을 할당하려 함

user의 이름은 _name에 저장되고, 프로퍼티에 접근하는 것은 getter와 setter를 통해 이뤄진다.

기술적으론 외부 코드에서 user._name을 사용해 이름에 바로 접근할 수 있다. 
그러나 밑줄 "_" 로 시작하는 프로퍼티는 객체 내부에서만 활용하고, 
외부에서는 건드리지 않는 것이 관습이다.

(인프런 "코딩인터뷰를 저격하는 JS 스나이퍼 양성학교" 강의 참고, 모던 자바스크립트 튜토리얼 참고)

profile
안녕하세요, FE 개발자 김민영입니다.

0개의 댓글

관련 채용 정보