getter setter in ES6

본 글은 공부하기 위한 목적으로 포스팅 되었으며 아래 링크의 원문을 참고하였습니다.
https://mygumi.tistory.com/161

Getter와 Setter는 대부분 캡슐화, 정보은닉 관점에서 private 개념이 따라오게 된다.

예시로는 private 변수를 지정한 후, 이 변수에 접근하기 위해 getter, setter를 이용한다.

다음 예제를 통해 확인해보자.

1. name을 저장할 때는 정확한 값일 때 저장한다.

2. name을 가져올 때는 대문자로 된 이름을 얻을 수 있다.

위 특징을 가지는 Person 클래스를 만들어보자.

class Person {
    constructor(name, age) {
        this._name = name;
        this.age = age;
    }
    get name() {
        return this._name.toUpperCase();
    }
    set name(newName){
        if(newName) {
            this._name = newName;
        }
    }
}

let man = new Person('John', 10);
console.log(man.name, man.age);      // JOHN 10
man.name = 'John Park';
man.age = 20;
console.log(man.name, man.age);      // JOHN PARK 20

이름이라는 변수는 실제 _name이 된다.

코드를 보면 실제 데이터인 _name에 직접 접근하지 않으면서, 정의된 오퍼레이션을 통해서만 접근하고 있다.

또한, 이름을 얻을 때, 사용자는 단순히 이름을 얻을 뿐이다.

대문자로 가공하는 과정은 내부에서 일어날 뿐이다.

즉, 단순히 사용자는 이름을 얻고자 할 뿐, 얻는 과정에 있는 내부적인 일은 신경쓰지 않는다.

이러한 원리가 캡슐화의 이점인 정보 은닉이 된다.

메소드로 접근하는 것처럼 보이지 않기 때문에 외관상에도 좋다.

getter/setter를 통한 일관성 유지

start, end, duration 3개의 변수가 있는 클래스가 존재한다.

start - 시작하는 시간
end - 끝나는 시간
duration - 지속되는 시간

먼저, getter/setter를 쓰지 않고 변수에 직접 접근하는 예를 보자.

class Time {
    constructor(start, end) {
        this._start = start;
        this._end = end;
        this._duration = end-start;
    }
}
const time = new Time(0, 20);

time._start = 5;
time._duration -= 5;

console.log(time._start)       // 5

start 변수의 값을 수정할 때, 사실상 duartion 변수도 수정되어야 하기 때문에 위와 같은 코드가 나올 것이다.

이 경우, 변수의 직접 접근을 통해 보호되지 못한다.

그 결과, 누구나 접근하여 변경할 수 있기에, start에 따른 duration 값이 맞지 않은 결과가 초래될 수 있다.

즉, 변수 관계에 있어서, 일관성을 깨뜨리게 된다.

getter/setter를 사용한 예를 보자.

class Time {
    constructor(start, end) {
        this._start = start;
        this._end = end;
        this._duration = end-start;
    }
    set start(newStart) {
        this._start = newStart;
        this._duartion = this._end - newStart;
    }
    get start() {
        return this._start;
    }
}
const time = new Time(0, 20);

time.start(5);
console.log(time.start);

getter/setter를 통해 접근함으로써, 변수를 보호할 수 있다.

또한, setter를 통해 start와 duration을 설정함으로써, 위에서 발생한 일관성 문제를 해결할 수 있다.

변수에 직접 접근하는 것처럼 보이지만 내부적으로는 그렇지 않다.

일관성 유지에 맞는 코드 및 외관상으로도 보기 좋은 유연한 코드가 만들어진다.

getter, setter는 위의 예들처럼 특정 목정이 있는 경우 설정한다.

무조건적으로 쓴다면, 단순히 불필요한 코드가 늘어나는 것이다.

getter/setter를 통한 일관성 유지

티스토리툴바