JavaScript 기초(28)_클래스(3) get과 set

1. get과 set

아래의 코드를 통해서 get과 set의 쓰임을 알아보자.

class A  {
    _name = 'no name';

    get name(){
        return this._name + '@@@';
    }

    set name(value){
        this._name = value + '!!!'
    }
}

const a = new A();
console.log(a);
a.name = 'Kim';
console.log(a);
console.log(a.name);
console.log(a._name);

Running] 
A { _name: 'no name' }
A { _name: 'Kim!!!' }
Kim!!!@@@
Kim!!!

맨 먼저 클래스 A를 가지는 객체 a를 생성해주었다. 

그대로 a를 출력했을 때는 초기값으로 설정된 'no name'이 출력되었다.

name 함수에 'Kim'을 할당하고 출력하니 'kim!!!'이 출력되었다.

Kim이 _name에 할당되었고 set을 통해서 '!!!'이 덧붙여져 _name에 할당되었기 때문이다.

 

맨 아래 'a.name'과 'a._name'을 통해서 get과 set의 차이를 알 수 있는데,

a.name을 통해서 name 함수 자체를 출력할 때는 get도 거치기 때문에 '@@@'도 같이 출력이 된다.

반면, a._name을  통해서 _name 변수를 출력할 때는 '@@@'은 출력되지 않는다. get은 변수에 할당하는 것이 아니기 때문이다.

 

get은 함수를 호출할 때 반환되는 값(return 값)만 반영하므로 변수 자체에 변화는 주지 않는다.

set은 함수를 호출 할 때 변수에 어떠한 값(value)을 추가하는 형태로 할당하여 반환하기 때문에 변수 자체에 변화를 준다.

 

다시 아래의 코드를 통해서 set의 역할을 알 수 있다. 

class B {
    _name = 'no name';

    get name(){
        return this._name + '@@@';
    }
}

const b = new B();
console.log(b);
b.name = 'Kim';
console.log(b);
console.log(b.name);

[Running] 
B { _name: 'no name' }
B { _name: 'no name' }
no name@@@

get만 있는 경우에는 'Kim'을 _name에 할당하는 것이 아니므로 출력 값이 모두 'no name'으로 나온다.

b.name을 출력할 때도 '@@@'은 붙어서 나오지만 여전히 'no name'으로 출력된다.