Javascript ES6 - getter & setter

최근 코딩 트렌드로 원본 데이터는 변경 불가능하게 하는 것이 대세입니다. 원본 데이터는 그대로 두고 함수로 데이터를 수정하거나 뽑아 쓰는 추세로 가고 있습니다. 이런 흐름에 따라 나타난 것이 getter와 setter 입니다. getter 와 setter를 살펴보기에 앞서 object 내에 함수를 만들어 데이터를 조작하는 법에 대해 알아보겠습니다.

 

 

1️⃣  원본데이터를 그대로 두고 데이터를 뽑아오는 법

 

const person = {
    name: 'kim',
    age: 30
}

 

person 오브젝트가 있습니다. 이런 상태에서 내년 나이를 출력하고 싶으면 어떻게 하면 될까요? 가장 먼저 떠오르는 방법은 person.age = 31 이렇게 직접적으로 원본데이터를 수정해주는 것입니다. 그런데 요즘 트렌드에는 맞지 않습니다. 요즘 트렌드에 맞는 방법은 아래와 같습니다.

 

const person = {
    name: 'kim',
    age: 30,
    nextAge(){
        return this.age + 1;
    }
}

 

오브젝트 안에 nextAge라는 함수를 만들어줬습니다. 이렇게 함수를 만들어 놓으면 person.nextAge() 라고 코드를 작성하고 결과를 보면 31이 나오는 것을 볼 수 있습니다.

 

그러면 굳이 이렇게 함수를 만들어서 하는 이유가 뭘까요? 솔직히 말해서 바로 데이터를 수정하는 것이 함수를 만드는 것보다는 간편한 것이 사실인데 말이죠. 두 가지 정도로 설명할 수 있습니다.

 

1.  오브젝트 안에 데이터가 복잡할 때 그것들을 조작하기가 쉬워집니다. 간단한 데이터는 원본을 수정하는 것이 어렵지 않지만 데이터가 복잡해질수록 함수를 만들어서 조작하는 것이 훨씬 쉽습니다.

 

2. 오브젝트의 원본데이터를 건드리지 않기 때문에 실수를 방지할 수 있습니다.

 

 

2️⃣  원본데이터를 건드리지 않고 데이터를 수정하는 방법

 

위에서 함수를 통해 데이터를 활용해서 새로운 값을 얻는 방법을 봤다면 함수를 통해 원본 데이터 자체를 수정하는 방법도 있습니다.

 

const person = {
    name: 'kim',
    age: 30,
    setAge(newAge){
        this.age = newAge;
    }
}

 

setAge 함수에 파라미터를 주고 그 파라미터를 this.age로 바꿔주는 것을 통해 오브젝트의 데이터 자체를 변경할 수 있습니다.

 

 

3️⃣  get & set 키워드 사용하기

 

get과 set 키워드는 왜 사용하는 것일까요? 함수를 통해서 데이터를 조작하면 여러가지 장점이 있지만 한편으로는 단점도 있습니다. 바로 코드를 작성할 때 복잡성이 조금 증가한다는 것입니다. setAge함수를 예를 들면 person.setAge(40) 이렇게 소괄호도 써야하기 때문에 복잡해집니다. 이것을 해결하기 위해 get과 set 키워드를 사용하게 됩니다. get과 set 키워드를 사용하면 함수를 property처럼 만들어주기 때문에 소괄호 없이도 값을 편하게 수정할 수 있게 해줍니다.

 

const person = {
    name: 'kim',
    age: 30,
    set setAge(newAge){
        this.age = newAge;
    }
}

 

set을 활용하면 이제 age를 수정해줄 때 person.setAge(40) 이렇게 해줄 필요 없이 person.setAge = 40 이렇게 해줄 수 있습니다. 일반 property를 수정할 때랑 동일합니다. set을 활용할 때 주의할 점은 반드시 파라미터가 단 한 개!(두 개는 안 됩니다) 있어야 합니다. set은 새로운 값을 설정하는 것이므로 그에 맞게 파라미터를 넣어준다고 기억하시면 좋습니다. set 키워드를 활용해 만든 함수를 setter라고 합니다.

 

 

const person = {
    name: 'kim',
    age: 30,
    get nextAge(){
        return this.age + 1;
    }
}

 

get 키워드를 활용해서 함수를 만들었습니다. 이렇게 하면 이제 person.nextAge() 이렇게 소괄호까지 쓰지 않고 person.nextAge 만으로 값을 출력할 수 있습니다. get 키워드를 활용할 때 주의할 점은 반드시 return 값이 있어야 한다는 것입니다. get 자체가 무언가를 가져오기 위해 쓰는 것이므로 그 가져오기 위한 값인 return 값이 있어야 합니다. get 키워드를 활용해 만든 함수를 getter 라고 합니다.

 

 

일반 오브젝트가 아닌 class에 getter와 setter를 만들어주는 것도 동일합니다. constructor 바깥에 오브젝트에 만들 때처럼 동일하게 만들면 됩니다.