Getter & Setter

🦋 getter & setter

getter는 정해놓은 값을 가져오는 것, setter는 정해놓은 값을 새롭게 다시 설정해주는 것을 뜻한다.
또한 데이터를 수정 또는 출력할때 데이터의 원본을 보존하기 위해, 직접 원본 데이터를 만지는게 아니라 간접적으로 다룰 수 있게 해주는 키워드이다.

객체의 속성(property)은 두 종류로 나눠진다.
1) 데이터 프로퍼티(data property)
2) 접근자 프로퍼티(accessor property)

접근자 프로퍼티 의 본질은 함수이다. 이 함수는, 값을 획득(get)하고 설정(set) 하는 역할을 담당한다.
그러나 외부 코드에서는 함수가 아닌 일반적인 속성(property)처럼 보인다.

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

getter메서드는 obj.propName 을 사용해 프로퍼티를 읽으려고 할 때 실행되고,
setter메서드는 obj.propName = value 으로 프로퍼티에 값을 할당하려 할 때 실행된다.

let user = {
  name: "may",
  surname: "Lee"
}

get fullName() {
  return `${this.name} ${this.surname}`
};
// fullName이 user에 접근할 수 있다. 
// getter(접근자 프로퍼티)를 활용하여 접근할 수 있다. 

alert(user.fullName);  // May Lee

바깥 프로퍼티에서는 접근자 프로퍼티를 일반 프로퍼티를 사용할 수 있다. 접근자 프로퍼티를 사용하면 함수처럼 호출하지 않고, 일반 프로퍼티에서 값에 접근하는 것처럼 평범하게 user.fullName을 사용해 프로퍼티 값을 얻을 수 있다.
❗️ fullName은 getter메서드만 가지고 있기 때문에, user.fullName = 을 사용해서 값을 할당하려고 하면 에러가 난다.

let user = {
  get fullName() {
    return `...`;
  }
};

user.fullName = "Test"  
// Error (프로퍼티에 getter 메서드만 있기 때문에 값할당X)

let user = {
  name: "May",
  surname: "Lee"
}

get fullName() {
  return `${this.name} ${this.surname}`;
},

set fullName(value) {
  [this.name, this.surname] = value.split(" ");
};

// 주어진 값을 사용해 set fullName이 실행된다.
user.fullName = "Vivian Kong";

alert(user.name); // Vivian
alert(user.surname); // Kong

이렇게 getter와 setter메서드를 구현하면 객체에는 fullName이라는 가상의 프로퍼티가 생긴다.
가상의 프로퍼티는 읽고 쓸 수는 있지만 실제로는 존재하지 않는다.

• get : 인수가 없는 함수로, 프로퍼티를 읽을 때 동작함
• set : 인수가 하나인 함수로, 프로퍼티에 값을 쓸 때 호출됨

• Object.defineProperty(obj, prop, descriptor):

// Object.defineProperty 에 설명자 get, set을 전달하면
// FullName을 위한 접근자를 만들 수 있다.
let user = {
  name: "May",
  surname: "Lee"
};

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} ${this.surname}`;
  },
  set(value) {
    [this.name, this.surname] = value.split(" ");
  }
});

alert(user.fullName); // May Lee

for (let key in user) alert (key); // name, surname

❗️ 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 = "May";
alert(user.name); // May

user의 이름은 _name에 저장되고, 프로퍼티에 접근하는 것은 getter와 setter를 통해 이루어진다.
기술적으로는 외부 코드에서 user._name을 사용해 이름에 바로 접근할 수 있다.

그러나 밑줄( __ )로 시작하는 프로퍼티는 객체 내부에서만 활용하고 외부에서는 건드리지 않는 것이 관습이다.

name() 앞에 get 키워드를 입력하면 getter 호출시 name.getter()가 아닌 name.getter로 소괄호 없이 사용이 가능하다.
이는 set도 똑같이 쓸 수 있으며, 파라미터를 집어 넣기 위해선 name.setter = 'may' 이런식으로 사용할 수 있다.