[JavaScript] 접근자 프로퍼티

자바스크립트에도 getter, setter를 이용해서 데이터를 읽거나 값을 변경할 수 있도록 구성할 수 있고, 또 이렇게 구현하는게 은닉화를 잘 활용한 코드로써 사용 안한 코드보다 더 안전하게 작성 할 수 있습니다.

접근자란 객체 지향 프로그래밍에서 객체가 가진 프로퍼티 값을 바깥에서 읽거나 쓸 수 있도록 제공하는 메서드를 말합니다. 객체의 프로퍼티를 객체 바깥에서 직접 조작하는 행위는 데이터의 유지 보수성을 해치는 주요한 원인입니다.

접근자 프로퍼티의 본질은 함수인데, 이 함수는 값을 획득(Get)하고 설정(Set) 하는 역할을 합니다.  접근자 프로퍼티는 'getter(획득자)'와 ‘setter(설정자)’ 메서드로 표현됩니다. 객체 리터럴 안에서 getter와 setter 메서드는 get과 set으로 나타낼 수 있습니다.

 

Getter : 인수가 없는 함수로, 특정 값을 조회하고자 할 때 사용합니다. 

Setter : 인수가 하나인 함수로, 특정 값을 설정하고자 할 때 사용합니다.

 

var numbers = {  
  // (1) 명칭 중복 방지를 위해 _사용.  
  _a: 1,  
  _b: 2,  
  sum: 3,    
  
  calculate() {    
    console.log("calculate 실행");    
    this.sum = this._a + this._b;  
  },   
  
  get a() {    
    return this._a;  
  },  
  get b() {    
    return this._b;  
  },    
  
  set a(value) {    
    this._a = value;    
    // (2) 값을 설정할 때마다 sum을 최신화 해주기 위해 calculate() 실행.    
    this.calculate();  
  },  
  set b(value) {    
    this._b = value;    
    this.calculate();  
  },
};


console.log(numbers.sum); // 3 출력 

// 주어진 값을 사용해 set a가 실행
numbers.a = 5; // 'calculate 실행' 출력
numbers.b = 7; // 'calculate 실행' 출력
numbers.a = 9; // 'calculate 실행' 출력

console.log(numbers.sum); // 16 출력 

// (3) sum 조회할 때마다 계산하는 것이 아닌, 값이 수정될 때 계산하기 때문에 더 효율적이라 할 수 있다.(재사용)
// 즉, 값이 수정될 때 계산된 값을 sum에 저장하고 이 값을 재사용하는 것이다.

 

(1) 변수 명칭에 대한 중복 방지를 위해 _를 사용, 통상적으로 getter setter 메서드에 이용되는 변수값들은 앞에 _(언더스코어)를 사용하는 것 같습니다.

(2) Setter 함수를 이용해 값을 수정하면 변수 sum의 값이 최신화 됩니다.

(3) sum을 조회할 때마다 계산하는 것이 아닌, Setter함수를 호출 할 때 Calculate() 함수를 호출하여 계산하므로 sum을 조회할 때는 이미 계산된 값을 재사용합니다. 

 

 

출처: https://bbangson.tistory.com/75?category=980374 [뺑슨 개발 블로그:티스토리]