자바스크립트의 Getter / Setter

TLDR;

자바스크립트의 Getter / Setter는 접근자 프로퍼티로, 프로퍼티의 값을 통제하거나 변경사항에 유연하게 대처하기 위해 사용된다. 데이터 프로퍼티와 다르게 [[Value]]프로퍼티 어트리뷰트를 가지고 있지 않아, setter와 getter로 정의한 접근자 프로퍼티는 읽고 쓸 순 있지만 콘솔로 확인했을 때에는 실제로는 존재하지 않는 가상의 프로퍼티이다.

 

데이터 프로퍼티 vs 접근자 프로퍼티

자바스크립트의 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다.

구분	설명
데이터 프로퍼티(data property)	키-값으로 구성된 일반적인 프로퍼티, 지금까지 내가 알던 눈에 보이는 그 프로퍼티
접근자 프로퍼티(accessor property)	자체적으로는 값을 갖지 않고([[Value]]), 값을 읽거나(Getter) 저장(Setter)할 때 호출되는 접근자 함수로 구성된 프로퍼티

 

구분 방법

데이터 프로퍼티와 접근자 프로퍼티를 구분하는 가장 명확한 방법은, 두 프로퍼티가 가지고 있는 프로퍼티 디스크립터를 확인해 보는 것이다. 프로퍼티 디스크립터가 뭔데?

 

프로퍼티 디스크립터란?

프로퍼티 어트리뷰트 정보를 제공하는 객체이다.

자바스크립트 엔진이 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티의 상태란 프로퍼티의 값(value), 값의 갱신 가능 여부(writable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable) 등을 말하며, 프로퍼티 어트리뷰트란 자바스크립트 엔진이 관리하는 내부 상태 값(meta-property)인 내부 슬롯 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]을 의미한다.

 

프로퍼티 어트리뷰트는 내부 슬롯이기 때문에 직접 접근할 수는 없지만 Object.getOwnPropertyDescriptor 혹은 Object.getOwnPropertyDescriptors 메서드를 통해 간접적으로 확인할 수 있다.

---

 

데이터 프로퍼티

다음과 같은 프로퍼티 어트리뷰트를 갖는 프로퍼티를 데이터 프로퍼티라고 한다. 이 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의된다.

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
[[Value]]	value	프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값
[[Writable]]	writable	프로퍼티 값의 변경 가능 여부 / default : true
[[Enumerable]]	enumerable	프로퍼티의 열거 가능 여부, 즉 for...in 혹은 Object.keys 메서드 사용가능 여부 / default : true
[[Configurable]]	configurable	프로퍼티의 재정의 가능 여부, false인 경우 해당 프로퍼티의 삭제 및 프로퍼티 어트리뷰트 값의 변경이 금지된다.

 

접근자 프로퍼티

다음과 같은 프로퍼티 어트리뷰트를 갖는 프로퍼티를 접근자 프로퍼티라고 한다. 자체적으로 값을 갖지 않고 다른 데이터의 값을 읽거나 저장할 때 사용하는 접근자 함수(setter, getter)로 구성된 프로퍼티다. 접근자 프로퍼티의 본질은 '함수'이지만 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보인다.

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
[[Get]]	get	인수가 없는 함수로(getter), 프로퍼티 값을 읽어올 때 동작한다.
[[Set]]	set	인수가 하나인 함수로(setter), 프로퍼티에 값을 쓸 때 사용된다.
[[Enumerable]]	enumerable	데이터 프로퍼티와 동일
[[Configurable]]	configurable	데이터 프로퍼티와 동일

 

setter와 getter의 일반적인 사용법

let obj = {
  get propName() {
    // getter, obj.propName을 실행할 때 실행되는 코드
  },

  set propName(value) {
    // setter, obj.propName = value를 실행할 때 실행되는 코드
  }
};

console.log(obj);      // {}
console.log(Object.getOwnPropertyDescriptors(obj));    // {propName: {get: propName(), set: propName(value), enumerable: true, configurable: true}}

여기서 주목할 점은, setter와 getter로 정의한 접근자 프로퍼티는 읽고 쓸 순 있지만 실제로는 존재하지 않는 가상의 프로퍼티라는 점이다.

 

프로퍼티이기에 사용시에는 메소드와 다르게 일반 프로퍼티처럼 obj.propName = 'Minju', console.log(obj.propName)와 같은 형식으로 읽고 사용해야 하며, 실제로는 존재하지 않는 가상의 프로퍼티이기 때문에 위 코드에서 확인해 본 것 같이 console에 객체를 찍어보면 접근자 프로퍼티는 출력이 되지 않는 것을 알 수 있다.

 

또한, 콘솔에는 찍히지 않았지만, Object.getOwnPropertyDescriptors를 통해 확인해 보면 프로퍼티 디스크립터 객체에 propName의 디스크립터 객체가 찍히는 것을 알 수 있다.

---

접근자 프로퍼티의 활용

그래서 접근자 프로퍼티를 어디에다가 쓸 수 있을까?

활용케이스 1. 프로퍼티 값 통제하기

아래 코드에서 사용자가 user.age에 음수인 값을 넣지 못하도록 만들었다. 실제 값은 별도 프로퍼티 _age에 저장된다.

let user = {
 get age(){
   return this._age;
 },

 set age(value){
      if(value < 0) {
      return alert('age cannot be negative');    // 사용자가 user.age = -100 과 같이 말도 안되는 값을 넣는 것을 제어할 수 있다.
    }
    this._age = value;
 }
}

user.age = 100;
console.log(user);   // {_age: 100}
console.log(user.age); // 100

 

활용케이스 2. 변경사항에 손쉽게 대처하기 (호환성을 위해 사용)

아래와 같이 이름과 나이를 사용해서 사용자를 나타내는 객체를 구현한다고 가정해보자.

function User(name, age) {
  this.name = name;
  this.age = age;
}

let minju = new User("Minju", 25);

alert( minju.age ); // 25

그런데, 나이가 아니라 생일을 반환해달라고 요구사항이 바뀌었다고 해보자.

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
}

let minju = new User("Minju", new Date(1992, 6, 1));

alert(minju.age);  // 여기는 전부 오류가 날 것이다.!!! 😂

 

생성자 함수를 이렇게 변경했다면 기존 코드 중, age를 사용하고 있는 코드를 모두 찾아 수정해줘야 할 것이다. 그런데 이렇게 일일이 찾아서 수정하는 것은 가능하긴 하지만 시간이 오래걸린다. 또한 여러 사람이 사용중이라면 언제 모두 찾아서 바꿔어주냐....@.@

 

이럴 때, 접근자 프로퍼티를 이용하여 다음과 같이 코드를 변경해 줄 수 있다.

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;

  // age 프로퍼티를 접근자 프로퍼티로 생성
  Object.defineProperty(this, "age", {
    get() {
      let todayYear = new Date().getFullYear();
      return todayYear - this.birthday.getFullYear();
    }
  });
}

let minju = new User("Minju", new Date(1992, 6, 1));

alert( minju.birthday ); // birthday를 사용할 수 있습니다.
alert( minju.age );      // age 역시 사용할 수 있습니다.

 

활용케이스 3. 변경사항에 손쉽게 대처하기 2(호환성을 위해 사용)

바로 전과 비슷한 내용으로, 서버에서 이름과 성을 받아 실제 화면에서는 fullName을 리턴해줘야 한다고 해보자.

let user = {
  firstName: "민주",
  lastName: "김",
};

화면의 이름을 보여주는 곳에서는 아마 다음과 같이 변수를 생성하고 원하는 풀네임을 반환하여 사용했을 것이다.

const fullName = `${user.firstName} ${user.lastName}`;

그런데 요구사항이 변경되어 만약 이름에 전부 '회원님'을 붙여야 한다고 해보자. 그러면 변수 fullName이 있는 곳을 전부 찾아 일일이 변경해줘야 할 것이다. 이 때, 객체 안에서 getter를 사용하고 있더라면 이 변경사항에 쉽게 대처할 수 있다! 아래처럼 한군데만 간편하게 변경해 주면 되기 때문이다!

let user = {
  firstName: "민주",
  lastName: "김",

  get fullName() {
    return `${user.firstName} ${user.lastName} 회원님`
  }
};

user.fullName

 

 

참고

- 자바스크립트 DeepDive

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

프로퍼티 getter와 setter

- 드림코딩 엘리 자바스크립트 6. 클래스와 오브젝트 차이점