[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개의 댓글