JavaScript의 getter와 setter 에 대해서

객체(Object)안의 요소 중 접근자 프로퍼티로 getter(접근자)와 setter(설정자)가 있다. getter는 값을 획득하고, setter는 값을 설정하는 역할을 한다. 이 메서드들은 정보 은닉, 즉 변수에 직접적인 접근을 방지한다. 물론 getter와 setter를 만들었다고해서 변수를 직접적으로 조작을 못하는 것은 아니지만, getter와 setter를 통하여 의도에 맞게 사용할 수 있도록 돕는다.

 

Getter

Getter는 객체의 프로퍼티의 값을 반환하는 메서드다. 프로퍼티로 직접 접근하는 대신 getter를 통해 값을 가져올 수 있다. getter는 매개변수를 가지면 안된다. getter는 값이 실제로 필요한 상황이 오기 전까지 시행되는 것을 미루기때문에 cpu를 낭비하지 않는다는 장점이 있다.

• get 속성이름(){}

 

Setter

Setter는 프로퍼티에 값을 할당하려할 때 실행된다. 정한 속성 값이 변경될 때마다 함수를 호출한다. 프로퍼티에 새로운 값이 할당될때 setter를 통해 값에 대한 검증 또는 추가적인 로직을 포힘힐 수 있다. setter는 한개의 매개변수만 가질 수 있다.

• set 속성이름(값){}

 

Getter & Setter 예제

obj1이라는 객체를 만들고 그 안에 _num이라는 변수(변수명에 언더바(_)를 사용하는 것은 '현재 스코프에서만 쓰는 로컬변수'라는 일종의 약속이다.)를 선언한다. setter메서드에 따라 값을 설정하면 함수를 호출해서 숫자가 아니면 "숫자가 아닙니다"를 호출하고, 숫자일 경우에는 "숫자 : 값"을 호출하는 검증을 넣었다. getter의 경우 this._num의 값을 가져와 필드의 값을 반환한다.

        const obj1 = {
            _num : 0, 
            get num(){
                return this._num;
            },
            set num(n){
                if(isNaN(n)){
                    console.log("숫자가 아닙니다.");
                }else{
                    this._num = console.log(` 숫자 : ${n}`);
                }
            }
        }

        obj1.num = "안녕"; //숫자가 아닙니다.
        obj1.num = 123; // 숫자 : 123
        obj1.num;

 

Getter & Setter 주의할 점

Getter만 선언

getter만 선언했을 시 프로퍼티에 값을 할당할 수 없기 때문에 값을 설정해도, num을 불러오면 프로퍼티 값이 변경이 되지 않은 모습을 볼 수 있다. 

        const obj1 = {
            _num : 0, 
            get num(){
                return this._num;
            }
        }
        obj1.num = 4;
        console.log(obj1.num); //0

 

Getter & Setter 무한반복

`obj1.num =값`을 할당하면서 setter를 호출하게 되고, this.number에 `n`을 할당하게 되고 또 다시 setter를 호출하게 된다. 이 과정이 반복되면서 setter가 무한반복에 빠지게 된다. getter 또한 console.log(obj1.num)을 통해서 this.num을 사용하기 위해 getter를 호출하게 되고, 값이 할당된 this.num을 리턴하기 위해 getter을 호출하는 과정이 반복되면서 getter가 무한반복에 빠지게 된다.

        const obj1 = {
            get num(){
                return this.num;
            },

            set num(n){
                this.num = n;
            }
        }

        obj1.num = 2;
        console.log(obj1.num); //RangeError

 

무한반복을 방지하기 위해 getter와 setter내에서 사용되는 변수명을 현재 스코프에서만 쓰는 로컬변수'라는 의미로 언더바(_)를 붙여서 설정해주면 된다. 

        const obj1 = {
            get num(){
                return this._num;
            },

            set num(n){
                this._num = n;
            }
        }

        obj1.num = 2;
        console.log(obj1.num); //2