[자바스크립트] 프로퍼티 getter / setter

접근자 프로퍼티 

객체의 프로퍼티는 데이터 프로퍼티  / 접근자 프로퍼티로 나뉜다.

여기서 getter /setter 는 접근자 프로퍼티에 해당하며, 값을 획득/읽기(get)하고 설정/할당(set) 하는 역할을 담당한다 

외부 코드에서는 함수가 아닌 일반적 프로퍼티처럼 보임 

→ 접근자 프로퍼티를 사용하면 함수처럼 호출하는 것 같지 않고, 일반 프로퍼티에서 평범하게 get함수 호출 해 값을 얻음 

let user = {
	name : "John",
    surname : "Smith",
    
    get fullName() {
    	return `${this.name} ${this.surname}`;},
        
    set fullName(value) {
    	[this.name, this.surname] = value.split(" "); 
        }
     };
     
     user.fullName = "Alice Cooper";
     alert(user.name);  // Alice
     alert(user.surname); // Cooper

 

접근자 프로퍼티 설명자

접근자 프로퍼티는 value, writable(데이터 프로퍼티) 가 없는 대신에 get /set이라는 함수가 존재함 

→ get : 인수 없는 함수, 프로퍼티 읽을 때 동작

→ set : 인수가 하나인 함수, 프로퍼티 값을 쓸 때 호출 

→ enumerable : 데이터 프로퍼티와 동일 

→ configurable : 데이터 프로퍼티와 동일 

 

getter / setter

실제 프로퍼티 값을 감싸는 래퍼처럼 사용해, 프로퍼티의 값을 통제할 수 있음 

getter와 setter를 사용해 데이터 프로퍼티의 행동과 값을 원하는 대로 조정할 수 있게 해준다는 점에서 유용합니다.

 

getter / setter 예시 

// 이미 객체가 있을 때, getter 속성 추가
Object.defineProperty(myPuppy, "americanAge", {get : function(){return this.age-1;}})

// 이미 객체가 있을 때, 객체의 setter속성 추가 
Object.defineProperty(myPuppy, "changeAge", {set:function(n){this.age = this.age + n;}})

<참고자료>

https://ko.javascript.info/property-accessors