[JavaScript] 자바스크립트에서 클래스 데이터의 setter/getter 사용하기

260_자바스크립트에서 클래스 데이터의 setter/getter 사용하기

[적용]

• 클래스의 필드처럼 동작하는 함수를 사용하고 싶을 때

---

[문법]

구문	의미
set 속성명(값) {}	setter 정의
get 속성명	getter 정의

---

[내용]

setter/getter는 클래스의 필드와 같은 방식으로 작동하며, set은 값을 설정하고 get은 값을 가져온다.

 

MyClass 클래스에 customField 이름의 setter/getter를 정의하는 샘플을 확인해 보자.

JavaScript  

class MyClass {
  // 'customField'의 setter
  set customField(value) {
    this._customField = value;
  }
  
  // 'customField'의 getter
  get customField() {
    return this._customField;
  }
  
  constructor(value) {
    this._customField = value;
  }
}

 

클래스 내부 customField 에 값을 설정하고나 가져오는 것이 가능하다.

customField는 MyClass의 필드와 같은 방식으로 작동하지만, 실제로 실행되는 것은 set과 get으로 정의한 메소드다.

JavaScript                                                                                                                                                   

const myInstance = new MyClass();

// 값 설정(set customField(값) {}) 부분이 실행됨
myInstance.customField = 20;

// 값 가져오기(get customField(값) {}) 부분이 실행됨
console.log(myInstance.customField);  // 결과: 20

 

set 을 메소드처럼 정의하고 있지만 myInstance.customField(20)과 같은 방식으로는 사용이 불가능하며,

속성의 방식과 같이 'myInstance.customField=20'의 대입 방식을 사용한다.

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김