데이터 프로퍼티 / 접근자 프로퍼티 (getter / setter)

1. 객체 프로퍼티

0. 단순 메서드
1. 데이터 프로퍼티
2. 접근자 프로퍼티 : 값을 획득(get)하고 설정(set)하는 역할을 담당

• 접근자 프로퍼티는 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보입니다.

---

EX)

0. 단순 메서드

    let obj = {
    	propName(){
    		console.log('propName')
  	},
  	propName1 : function(){
    		console.log('propName');
  	}
    };

obj.propName();
obj.propName1();

해당 propName과 propName1은 일반함수를 실행하는 방식을 따라 프로퍼티 처럼 보이지 않는다.

• 이를 해결하기 위해서는 접근자 프로퍼티 를 사용한다.

---

1. 데이터 프로퍼티

let obj = {
  a : 100,
  b : 200
}
console.log(obj.a , obj.b);

---

2. 접근자 프로퍼티

get , set을 추가한다.

    let obj = {
   	get propName(){
    		console.log('propName')
  	},

  	set propName(val){
    		console.log('propName' + val);
  	}
    };

obj.propName;
obj.propName = 1000;

getter 메서드는 obj.propName을 사용해 프로퍼티를 읽으려고 할 때 실행되고,
setter 메서드는 obj.propName = value으로 프로퍼티에 값을 할당하려 할 때 실행됩니다.
즉, get 은 주로 return으로 읽으려는 값을 목표로 사용하고
set은 어떤 대상을 수정하기 위한 용도로 사용한다.

• 주의 : Setter must have exactly one formal parameter.
  ( set에는 매개변수를 적어도 하나 이상은 넣어야한다. )

---

2. 접근자 프로퍼티를 사용하는 이유

보다 좋은 코드 작성

---

보다 좋은 코드 작성

• 접근자 프로퍼티 미사용

class Time 
{ 
  constructor(start, end) 
  { this._start = start; 
   this._end = end; 
   this._duration = end - start 
  } 
  setStart (newStart) 
  { this._start = newStart; 
   this._duration = this._end - this._start; 
  } 
  getStart() 
  { return this._start; } 
} 
const time = new Time(0, 20); 
time.setStart(5); 
console.log(time.getStart());

---

• 접근자 프로퍼티 사용

class Time 
{ 
  constructor(start, end) 
  { this._start = start; 
   this._end = end; 
   this._duration = end - start; 
  } 
  set start (newStart) 
  { this._start = newStart; 
   this._duration = this._end - this._start; 
  } 
  get start () { return this._start; } 
} 
const time = new Time(0, 20); 
time.start = 5; 
console.log(time.start);

---

출처

js Info
마이구미
접근자 프로퍼티