getter, setter란?

자바스크립트를 공부하다 심심치 않게 나오는 단어인 게터, 세터에 대한 개념을 한 번 더 정리해 보도록 합니다. 😶

객체의 프로퍼티

객체의 속성으로 두 가지 종류가 있습니다.
데이터 속성
접근자 속성

데이터 속성은 객체 안의 키-밸류 형태의 속성을 말합니다.

let obj = {
 firstName: 'sy',
 lastName: 'k',
 age: 12,
}

접근자 속성은 함수처럼 생겼지만 해당 객체의 값을 얻고 (get), 설정하는 역할 (set)을 수행합니다. 특이점으로는 외부 코드에서는 함수가 아닌 일반적인 속성값을 불러내는 것처럼 보입니다.

let obj = {
 firstName: 'sy',
 lastName: 'k',
 age: 12,
 get fullName() {
  return `${this.firstName} ${this.lastName}`
 }
 set age(num) {
  this.age = num;
 }
}

getter

위 코드에서 게터 함수를 이용해 풀 네임을 가져오는 방법은 아래와 같습니다.

console.log(obj.fullName) // sy k

setter

위 코드에서 세터 함수를 이용해 나이를 설정하는 방법은 아래와 같습니다.

user.age = 13;
console.log(obj.age) // 13

활용법

이름의 길이가 4글자 이상이여야하는 name 값을 만들어야 한다면

let user = {
 name: 'default',
 get name() {
  return this.name;
 }
 set name(value) {
  if (value.length < 4) {
   throw new Error('입력한 이름의 길이가 짧습니다.);
  }
  this.name = value;
 }
}

이렇게 게터로 객체의 이름을 얻고, 새터로 이름의 길이가 4미만인 경우 에러를 던지는 식으로 작성을 할 수 있습니다.

user.name = 'sykim';
console.log(user.name); // syk
user.name = 'abc'; // error! 입력한 이름의 길이가 짧습니다.

세터 함수를 이용하면 객체 내의 데이터값에 유효성 검사를 추가하여 재설정이 가능한 효과를 얻을 수 있습니다. 👍

user 객체 안의 데이터 값 name에 접근을 제한하고 싶다면

let user = {
 get name() {
  return this._name;
 }
 set name(value) {
  if (value.length < 4) {
   throw new Error('입력한 이름의 길이가 짧습니다.);
  }
  this._name = value;
 }
}

이렇게 실제 값은 _name이라는 별도의 프로퍼티에 저장을 시키면 프로퍼티에 접근하는 것은 getter와 setter를 통해 이루어집니다.

출처
https://ko.javascript.info/property-accessors