JavaScript
세터와 게터

소개

비고

새롭게 생성 된 객체에서 Setter / Getter 정의

JavaScript를 사용하면 객체 리터럴 구문에서 getter 및 setter를 정의 할 수 있습니다. 다음은 그 예입니다.

var date = {
    year: '2017',
    month: '02',
    day: '27',
    get date() {
        // Get the date in YYYY-MM-DD format
        return `${this.year}-${this.month}-${this.day}`
    },
    set date(dateString) {
        // Set the date from a YYYY-MM-DD formatted string
        var dateRegExp = /(\d{4})-(\d{2})-(\d{2})/;
        
        // Check that the string is correctly formatted
        if (dateRegExp.test(dateString)) {
            var parsedDate = dateRegExp.exec(dateString);
            this.year = parsedDate[1];
            this.month = parsedDate[2];
            this.day = parsedDate[3];
        }
        else {
            throw new Error('Date string must be in YYYY-MM-DD format');
        }
    }
};

date.date 속성에 액세스하면 2017-02-27 값이 반환됩니다. 설정 date.date = '2018-01-02 그러면 setter 함수가 호출되어 문자열을 구문 분석하고 date.year = '2018' , date.month = '01' 및 date.day = '02' 합니다. 형식이 잘못 지정된 문자열 (예 : "hello" )을 전달하려고하면 오류가 발생합니다.

Object.defineProperty를 사용하여 Setter / Getter 정의하기

var setValue;
var obj = {};
Object.defineProperty(obj, "objProperty", {
    get: function(){
        return "a value";
    },
    set: function(value){
        setValue = value;
    }
});

ES6 클래스에서 getter 및 setter 정의

class Person {
  constructor(firstname, lastname) {
    this._firstname = firstname;
    this._lastname = lastname;
  }

  get firstname() {
    return this._firstname;
  }

  set firstname(name) {
    this._firstname = name;
  }

  get lastname() {
    return this._lastname;
  }

  set lastname(name) {
    this._lastname = name;
  }
}

let person = new Person('John', 'Doe');

console.log(person.firstname, person.lastname); // John Doe

person.firstname = 'Foo';
person.lastname = 'Bar';

console.log(person.firstname, person.lastname); // Foo Bar