[자바스크립트] getter와 setter

 

프로퍼티 getter와 setter

객체의 프로퍼티 종류

1. 데이터 프로퍼티(data property)
   • 지금까지 사용한 모든 프로퍼티이다.
2. 접근자 프로퍼티(accessor property)
   • 이 함수는 값을 획득(get)하고 설정(set)하는 역할을 담당한다.

 

 

getter와 setter

• 접근자 프로퍼티는 'getter(획득자)'와 ‘setter(설정자)’ 메서드로 표현된다.
• 객체 리터럴 안에서 getter와 setter 메서드는 get과 set으로 나타낼 수 있다.

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

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

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

 

// user객체에 프로퍼티 name과 surname생성
let user = {
  name: "John",
  surname: "Smith"
};

//기존 값을 복사-붙여넣기 하지 않고 fullName이 'John Smith'가 되도록 하려면 접근자 프로퍼티를 구현

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

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

alert(user.fullName); // John Smit

• 접근자 프로퍼티를 사용하면 함수처럼 호출하지 않고, 일반 프로퍼티에서 값에 접근하는 것처럼 평범하게 user.fullName을 사용해 프로퍼티 값을 얻을 수 있다.

 

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이라는 '가상’의 프로퍼티가 생긴다.
• 가상의 프로퍼티는 읽고 쓸 순 있지만 실제로는 존재하지 않는다.

 

 

접근자 프로퍼티 설명자

• 접근자 프로퍼티엔 설명자 value와 writable가 없는 대신에 get과 set이라는 함수가 있다.

 

• 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

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

• defineProperty에 설명자 get과 set을 전달하면 fullName을 위한 접근자를 만들 수 있다.
• 한 프로퍼티에 get과 value를 동시에 설정하면 에러가 발생한다.

 

 

getter와 setter 활용하기

• getter와 setter를 ‘실제’ 프로퍼티 값을 감싸는 래퍼(wrapper)처럼 사용하면, 프로퍼티 값을 원하는 대로 통제할 수 있다.

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 = ""; // 너무 짧은 이름을 할당하려 함

 

 

호환성을 위해 사용

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

let john = new User("John", 25);

alert( john.age ); // 25

// 요구사항이 바뀌어서 age 대신 birthday를 저장하는 코드
function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
}

let john = new User("John", new Date(1992, 6, 1));

// 이렇게 생성자 함수를 수정하면 기존 코드 중 프로퍼티 age를 사용하고 있는 코드도 수정해 줘야 한다.

 

getter를 추가해서 문제 해결

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 john = new User("John", new Date(1992, 6, 1));

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

 

 

📌 참고

• 모던 JavaScript 튜토리얼