[Javascript] 프로퍼티 getter 와 setter

getter와 setter를 왜 쓰는걸까?

✔️ 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나뉜다.

✔️ 접근자 프로퍼티의 본질은 함수이기 때문에 데이터 프로퍼티와는 조작 방법이 다르다.

✔️ 접근자 프로퍼티는 getter와 setter를 이용해 조작해 접근할 수 있다.

     ➖ getter : 특정 값을 조회할 때 실행되는 함수

     ➖ setter : 특정 값이 변경되어 질 때 실행되는 함수

 

let user = {
  name:'John',
  surname: 'Smith',
  
  //기본적으로 값을 조회할 때 사용한다.
  get fulName(){
  	return `${this.name} ${this.surname}`;
  },
  
  //value에 새로운 값이 들어가 변경되면 아래의 함수가 실행된다.
  set fulName(value){
  	[this.name, this.surname] = value.split(' ');
    
  },
};

//바깥 코드에선 접근자 프로퍼티를 일반 프로퍼티처럼 사용할 수 있다. 그래서 '()'을 붙이지 않아도 됨.
user.fulName = 'Yang Seyoung';

console.log(user.name); //Yang
console.log(suer.surname); //Seyoung

 

접근자 프로퍼티 설명자

✔️ 접근자 프로퍼티의 설명자는 데이터 프로퍼티 설명자와 다르다.

     ➖ get : 프로퍼티를 읽을 때 동작

     ➖ set : 프로퍼티에 값을 쓸 때 호출

     ➖ enumerable : 데이터 프로퍼티와 동일

     ➖ configurable : 데이터 프로퍼티와 동일

 

let user = {
  name: 'John',
  surname: 'Smith'
};

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

alert(user.fullName); //John Smith

 

getter와 setter 똑똑하게 활용하기

✔️ 프로퍼티 값을 set 을 이용해 원하는대로 통제할 수 있다.

let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      alert("입력하신 값이 너무 짧습니다. 네 글자 이상으로 구성된 이름을 입력하세요.");
      return;
    }
    this._name = value;
  }
};

user.name = "Pete";
alert(user.name); // Pete

user.name = ""; // 너무 짧은 이름을 할당하려 함

 

get, set을 생성자 함수, class에서 사용하는 방법은!?

✔️생성자 함수에서 get, set을 설정하기 위해서는 defineProperty 로 선언해줄 수 있다.

function Something(defaultFoo) {
    this._foo = defaultFoo;
}

Object.defineProperty(Something.prototype, 'foo', {
    get: function() {
        return this._foo;
    },
    set: function(value) {
        this._foo = value;
    }
});

var something = new Something("bar");
console.log(something.foo);
something.foo = 'baz';
console.log(something.foo);

Reference

• http://yongho-coding.com/javascript-getter-setter/
• https://ko.javascript.info/property-accessors