[JavaScript] getter와 setter

-   getter : 객체의 property를 가져오는 함수

    -   getter의 값 계산은 실제 값이 필요할 때만 이루어진다. 즉 쓸데없는 CPU 낭비가 없음.
    -   getter가 호출될 때 처음 값이 계산되고, 이후의 호출은 다시 계산하지 않고 캐시 값을 반환함.
    
-   setter : 객체의 property를 설정하는 함수

    -   setter는 오직 하나의 parameter 만을 가질 수 있다.

class Name {
    constructor(first,last) {
        this._first = first;
        this._last = last;
        this._name = first + ' ' + last
    }
}

const Woody = new Name('Woosik','kim')  
console.log(Woody._name) // Woosik kim 
Woody._last = 'Lee';  
console.log(Woody) // Name { _first: 'Woosik', _last: 'Lee', _name: 'Woosik kim' }

만약 getter와 setter 없이 코드를 짠다면 위와 같이 Woody._last = 'Lee' 로 바꾸었지만, _name property 에는 반영되지 않는 것을 볼 수 있다.

그렇다면 getter와 setter 메소드를 넣어 코드를 바꿔보자.

class Name {
    constructor(first,last) {
        this._first = first;
        this._last = last;
        this._name = first + ' ' + last
    }
    get first() {
        return this._first
    }
    set first(newFirst) {
        this._first = newFirst;
        this._name = this._first + ' ' +this._last
    }
    get last() {
        return this._last
    }
    set last(newLast) {
        this._last = newLast;
        this._name = this._first + ' ' + this._last
    }
    get name() {
        return this._name
    }
}

const Woody = new Name('Woosik','Kim')
Woody.first = 'Woody'
console.log(Woody.first) // Woody
Woody.last = 'Lee'
console.log(Woody) // Name { _first: 'Woody', _last: 'Lee', _name: 'Woody Lee' }

_name 값을 따로 설정해주지도 않았는데 동적으로 _name 값이 변경된 것을 볼 수 있다. 그리고 getter와 setter를 이용해 Woody.first = 'Woody'와 console.log(Woody.first) 같이 _property처럼 직접 property에 접근하지 않고 값을 가져오거나 설정할 수 있다.

공부하면서 참고한 사이트

• https://mygumi.tistory.com/16
• https://beomy.tistory.com/14