[Javascript] 프로퍼티 getter/setter

데이터 프로퍼티와 접근자 프로퍼티

프로퍼티의 종류는 데이터 프로퍼티(data property)와 접근자 프로퍼티(accessor property)로 나뉨

 

지금까지 사용했던 모든 프로퍼티는 데이터프로퍼티이고 접근자 프로퍼티는 본질이 함수인데, 값을 얻고(get) 설정(set) 할 수 있음

 

외부에서 접근자 프로퍼티를 볼때는 함수가 아닌 일반적인 프로퍼티로 보임

 

getter와 setter

접근자 프로퍼티는 getter와 setter로 나눌 수 있음

 

객체의 리터럴 안에서 get, set으로 표현되고 객체를 호출할때는 getter가, 객체에 값을 할당할때는 setter가 자동으로 실행됨

let obj = {
	
    firstName:'ns',
    lastName:'park',
    get myName(){ return this.lastName + ' ' + this.firstName; },
    set myName(val){ [this.lastName,this.firstName] = val.split(" "); }
}

//get myName() 함수가 자동으로 실행
console.log(obj.myName);

//set myName('son hm') 함수가 자동으로 실행
obj.myName = 'son hm';

console.log(obj.myName);

 

자동으로 getter와 setter가 호출된 것을 볼 수 있음

 

접근자 프로퍼티의 설명자

접근자 프로퍼티의 설명자를 생성하여 살펴보면 value 와 writable이 없고 get 과 set이 있는것을 확인할 수 있음

let obj = {
	
    firstName:'ns',
    lastName:'park',
    get myName(){ return this.lastName + ' ' + this.firstName; },
    set myName(val){ [this.lastName,this.firstName] = val.split(" "); }
}

let desc = Object.getOwnPropertyDescriptor(obj,"myName");

console.log(desc);

 

 

getter와 setter 활용

getter와 setter를 실제 프로퍼티의 값을 감싸는 래퍼처럼 활용한다면 값을 원하는데로 통제할 수 있음

let character = {
	
    get id(){
    	return this._id;
    },
    set id(val){
    	if(val.length < 8){
        	console.log("계정의 길이는 최소8글자 입니다.");
            return;
        }
        this._id = val;
    }
}

character.id = 'asvc'
character.id = 'ooooo111111'
console.log(character.id);

 

위의 코드처럼 작성시 데이터가 담겨있는 _id 프로퍼티에 직접 접근하지 않아도 됨

 

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