JavaScript에서 Getter와 Setter

Getter, Setter

예를 한번 들어보죠. 이 예시는 역시 유튜버 엘리님의 강연에서 나온 얘기입니다 ㅎㅎ

커피 자판기가 있습니다. 이를 클래스로 지정해줍니다

class coffeeMachine {

}

다음에는 커핀 자판기에는 커피의 개수가 있습니다.

class coffeeMachine {
    int numberOfCoffee;
}

그 다음에는 메소드를 만듭니다. 동전을 넣고, 커피를 만들죠.

class coffeeMachine {
    int numberOfCoffee;

    putCoins() {}
    makeCoffee() {}
}

그러면 이 numberOfCoffee가 마이너스 값이 올 수가 없겠죠.
사용자가 마이너스 값이 넣을 수 없도록 getter와 setter를 사용합니다.
사용자가 실제로 마이너스값을 넣어도 우리가 setter로 변경하면 되니까!

그런데 만약 사용자가 실제로 이 마이너스 값을 자유자재로 설정할 수 있으면 굉장히 낭패를 볼 것입니다. 따라서 변수에 접근제한자를 둡니다. 아래와 같이 말이죠.

class coffeeMachine {
    private int numberOfCoffee;

    putCoins() {}
    makeCoffee() {}
}

이렇게 private으로 설정하면 다른 외부 사용자가 접근할 수 없도록 정보를 은닉화합니다.
바로 정보를 숨기는 것, 이것이 캡슐화입니다.
하지만 우리는 접근할 수 있도록 해야겠죠?
그 때 바로 Getter와 Setter를 사용합니다.

class coffeeMachine {
    int numberOfCoffee;

    get numberOfCoffee() {
        return this.numberOfCoffee;
    }

    set numberOfCoffee(value) {
        this.numberOfCoffee = value;
    }

    putCoins() {}
    makeCoffee() {}
}

getter는 값을 가져올 수 있도록 return을 해주고, setter는 값을 설정해주는 겁니다.

결론

사용자가 함부로 접근할 수 없도록 변수를 private으로 선언하는 것이 좋습니다.
private으로 선언되었기 때문에 정보를 숨길 수 있습니다. (캡슐화);
private으로 접근제한을 두었기 때문에 getter, setter로 접근 가능합니다.

---

위 코드로 실행을 하면 다음과 같은 에러가 뜹니다.

콜 스택이 초과되었다고.. 왜일까요?

this.numberOfCoffee를 메모리에 바로 적재하는 것이 아니라 get numberOfCoffee()함수를 호출합니다.
그리고 =numberOfCoffee를 바로 할당하는 것이 아니라 set numberOfCoffee()함수를 호출합니다.

set numberOfCoffee(value) {
    this.numberOfCoffee = value;
}

여기에서 this.numberOfCoffee에 value값을 할당할 때 이 setter를 호출하게 됩니다.
그러다 보니까 계속 setter를 호출하게 되는 것이죠.

이를 방지하기 위해서 this.numberOfCoffee에 변수명을 조금 다르게 표현을 시켜야 합니다. 보통은 this._numberOfCoffee underline을 써서 붙여줍니다. getter에도 마찬가지로 변경해줍니다.

get numberOfCoffee() {
    return this._numberOfCoffee;
}

numberOfCoffee에는 마이너스값이 오면 안되니까 다음과 같이 조건문을 달아주면 되겠죠?

set numberOfCoffee(value) {
    this.numberOfCoffee = value < 0 ? 0 : value;
}

좋은 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

참고 유튜브

드림코딩 by 엘리!!!