Accessor properties - getters and setters

객체의 프로퍼티는 두 종류로 나뉜다.
- 첫번째는 data property로, 우리가 아는 일반적인 프로퍼티를 말한다.
- 두번째는 accessor property(접근자 프로퍼티)다. 우선 이들의 정체는 함수이고, 값을 획득(get)하고 설정(set)하는 역할을 담당한다. 다만 이들은 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 다뤄진다는 특징이 있다. (함수처럼 ()를 써서 호출하는 것이 아니라, 일반 프로퍼티처럼 사용한다)
객체에서 뿐 아니라 class에서도 사용할 수 있다.

Syntax

접근자 프로퍼티에는 getter와 setter 두가지가 있는데, 각각 get 키워드와 set 키워드를 사용해 정의할 수 있다.
```
let obj = {
  get propName() {
    // getter, obj.propName을 실행할 때 실행되는 코드
  },

  set propName(value) {
    // setter, obj.propName = value를 실행할 때 실행되는 코드
  }
};
```
- 앞서 언급했듯이, 이들을 사용할때는 ()없이, 일반 프로퍼티처럼 사용한다. (위 주석에 나와 있는 것처럼)

Examples

Example 1 - with `this`

let user = {
  name: "John",
  surname: "Smith",

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

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

// 주어진 값을 사용해 set fullName이 실행됩니다.
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper

이렇게 getter와 setter 메서드를 구현하면 객체엔 fullName이라는 '가상’의 프로퍼티가 생긴다. 가상의 프로퍼티는 읽고 쓸 순 있지만 실제로는 존재하지는 않는다.
- 실제로 콘솔에서 위 코드를 실행시킨 후 user를 입력해보면 위와 같이 내부에 fullName 프로퍼티가 존재하지 않는 것을 확인할 수 있다. 그럼에도 user.fullName을 하면 값을 읽을 수 있다.

Example 2 - with prototype

이 예시는 https://ko.javascript.info/prototype-inheritance#ref-1393 여기에서 내가 따로 가져옴.

let user = {
  name: "John",
  surname: "Smith",

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

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

let admin = {
  __proto__: user,
  isAdmin: true
};

alert(admin.fullName); // John Smith (*)

// setter 함수가 실행됩니다!
admin.fullName = "Alice Cooper"; // (**)

alert(admin.fullName); // Alice Cooper, setter에 의해 추가된 admin의 프로퍼티(name, surname)에서 값을 가져옴
alert(user.fullName); // John Smith, 본래 user에 있었던 프로퍼티 값

split()메소드와 destructuring 사용해서 this.name과 this.surname setter 구현한 부분 신기하군
setter를 사용해 shadowing properties(name, surname)를 생성했다고 볼 수 있다.
- admin 객체에 name과 surname 프로퍼티를 setter를 통해 새로 생성했기 때문에, admin.fullName으로 접근 시 이전과는 다르게 프로토타입에 정의된 name과 surname이 아닌 admin에 정의된 name과 surname을 참조하게 된다.
  - 예제 1번과 마찬가지로 fullName 프로퍼티는 생성되지 않는다. 가상 프로퍼티이다.
- Shadowing properties 참고: 2. Shadowing properties

Example 3 - in classes

class ClassWithGetSet {
  #msg = "hello world";
  get msg() {
    return this.#msg;
  }
  set msg(x) {
    this.#msg = `hello ${x}`;
  }
}

const instance = new ClassWithGetSet();
console.log(instance.msg); // "hello world"

instance.msg = "cake";
console.log(instance.msg); // "hello cake"

Getter properties are defined on the prototype property of the class and are thus shared by all instances of the class.

Accessor properties - getters and setters

Syntax

Examples

Example 1 - with this

Example 2 - with prototype

Example 3 - in classes

**접근자 프로퍼티 설명자 …**

Example 1 - with `this`

접근자 프로퍼티 설명자 …