JS Getter과 Setter

📓 Getter과 Setter

접근자 프로퍼티로 객체 값을 흭득하고 설정, 변경하는 역할을 한다. getter(흭득자), setter(설정자) 메서드로 표현해서 함수 이름 앞에 get, set이라고 작성하면 된다.

const user = {
	name: 'magnus',
    age: 50
}

console.log(user.name); // magnus

user.name = 'Kaiden';
console.log(user.name); // Kaiden

기존에는 user라는 객체가 있으면 이 객체의 프로퍼티를 가져와서 이름값을 재설정하는 방식을 사용했다.

const user = {
	name: 'magnus',
    age: 50,
    
    get userName() {
    	return user.name;
    },
    set userName(value) {
    	user.name = value;
    }
}

객체 내부 속성에 직접 접근하지 않아 객체의 정보 은닉을 가능하게 해줘서 보안이 강화된다.
또한 코드의 안전성과 유지보수성을 높일 수 있다.

ES6 최신 자바스크립트부터는 함수 이름 앞에 get, set을 붙여서 Getter, Setter를 정의할 수 있다. (가독성 있음.)

추가 예시

class User {
  // 데이터 프로퍼티
  #firstname = "Aaron"
  #lastname = "Ryu"

  // 접근자 프로퍼티
  get fullname() {
    return `${this.#firstname} ${this.#lastname}`
  }

  set fullname(value) {
    [this.#firstname, this.#lastname] = value.split(" ")
  }
}

var user = new User()
user.fullname = "Baron Kim" // // Setter 호출
console.log(user.firstname) // undefined
console.log(user.lastname) // undefined
console.log(user.fullname) // 'Baron Kim'
Object.getOwnPropertySymbols(user) // []

원래는 user.firstname하면 Baron 이 출력 되어야 하는데 현재 firstname이 Private으로 User 클래스에 접근할 수 없기 때문에 undefined가 출력되는 것이다.

Private 변수 : 클래스 필드 앞에 # 을 붙인다.

📓 Getter, Setter 주의점

1. Getter와 Setter 같이 선언
2. 데이터 프로퍼티명과 접근자 프로퍼티명이 같다면 Setter 무한 루프에 빠짐.
   • setter 함수내에서 자기 자신을 호출 하기 때문에 무한 루프가 발생한다.

Reference

https://ko.javascript.info/property-accessors - 프로퍼티 getter와 setter