[JavaScript] getter와 setter

 

 

원본 데이터는 불변(Immutable)해야 한다는 원리로 데이터의 무결성 보존을 위해 사용되는 getter와 setter.

 

 

데이터를 수정하거나 출력할 때, 직접 원본 데이터를 만지는것이 아니라 함수를 사용하여 간접적으로 다루는것이 요즘 코딩의 추세이며 그 원리에 합치되는 코딩 기술 입니다.

 

 

 

아래 오브젝트 데이터를 만들어 보겠습니다.

var People = {
    name : 'kim',
    age : 30
}

console.log(People.age + 1); // 31

 

 

 

위 오브젝트에서 내년의 나이를 출력하고 싶으면 보통 어떻게 하게 될까요?

people.age + 1 을 하면 됩니다.

 

하지만, 데이터의 무결성을 보존하기 위해서는 함수를 따로 제작하여 사용합니다.

 

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

console.log(People.nextAge()); // 31

 

위와같이 함수를 만들어 원본 데이터를 유지하는 방법을 사용합니다.

 

 

굳이 이러한 방법을 하는 이유로는,

 

1. 오브젝트 안의 데이터가 복잡할수록 함수 데이터를 만들어 놓아야 데이터를 꺼내 쓰기 쉽습니다.

2. 내부에 있는 name, age 변수를 직접적으로 건드리지 않기 때문에 실수를 최소화할 수 있습니다.

 

 

특히, 매우 긴 오브젝트 안에 원하는 자주 사용되는 자료를 몇 개 가져와 사용할때 미리 위와같은 함수를 만들어 놓는다면 매 번 기능개발을 할 필요가 없습니다.

 

 

함수를 사용하여 오브젝트 내의 데이터를 수정하는 방법

 

이번에는 오브젝트에 있는 age 데이터를 수정하려고 합니다.

어떻게 변경하면 될까요?

 

people.age = 35 와 같은 방식으로 직접적인 수정을 할 수 있습니다.

 

하지만, 이 또한 별도의 함수를 제작하여 사용합니다.

 

var People = {
	name : 'kim',
    age : 30,
    setAge(age){
        this.age = age;
    }
}

People.setAge(35);

console.log(People.age); // 35

 

위와같이 setAge()함수를 만들어 한 번 더 거쳐서 데이터를 수정함으로서 실수를 방지할 수 있습니다.

 

 

하지만, 숫자와 같은 데이터를 수정을 할 때에는 한번 더 안전장치를 더해줄 수 있습니다.

 

데이터는 40과 '40'은 다르게 인식합니다. 40은 number로, '40'은 string으로 인식합니다. 때문에, string으로 된 숫자가 들어오더라도 number로 인식될 수 있도록 바꿔줄 수 있는 방법을 추가할 수 있습니다.

 

var People = {
	name : 'kim',
    age : 30,
    setAge(age){
        this.age = parseInt(age); // parsInt()를 추가하여 문자열로 된 숫자가 들어와도 number로 인식
    }
}

People.setAge('35'); // 따옴표를 넣어 문자열(string)로 된 숫자로 삽입

console.log(People.age); // 35

 

위와 같이 parseInt()라는 함수를 사용하여 string형식으로 숫자를 넣었더라도 number로 인식될 수 있도록 합니다.

 

 

 

getter와 setter

데이터를 꺼내 쓸 함수에는 get을 사용하고, 데이터를 수정하기 위해서는 set을 사용합니다.

get과 set을 사용하게 되면 괄호를 사용할 수 없게 되며, 괄호를 사용하여 호출할 경우 에러를 나타냅니다.

 

사용방법만을 보면 기존의 방법보다 사용하기 불편한데, 사용하는 이유가 있습니다.

바로 코딩 실수를 최소화 하기 위해서입니다.

 

 

get

데이터를 꺼내 보여주는 함수는 앞에 get을 붙여 사용할 수 있습니다.

함수를 호출할 때 파라미터가 있어서는 안되며, 함수 내에 return 값이 존재해야 합니다. 또한 호출할 때 소괄호를 붙이지 않아야 합니다.

 

var People = {
    name : 'kim',
    age : 30,
    get nextAge(){ // 함수의 앞에 get을 사용하여 꺼내 쓰는 전용 함수임을 알림
        return this.age + 1;
    }
}

console.log(People.nextAge) // 31 // get설정이 된 함수는 소괄호 없이 함수를 불러올 수 있음

 

 

set

데이터를 입력하고 수정하는 함수에는 set 키워드를 앞에 붙여 사용할 수 있습니다.

set을 사용할 때는 데이터를 입력하고 수정하기 때문에 하나의 파라미터가 꼭 입력되어야 합니다.

set에서는 여러 파라미터를 사용할 수 없습니다. 단일 파라미터만을 사용해야 합니다.

 

var People = {
    name : 'kim',
    age : 30,
    set setAge(age){ // set키워드를 사용하여 삽입,수정을 위한 함수임을 나타냄
        this.age = parseInt(age); // parseInt를 사용하여 문자열로 된 숫자가 들어오더라도 number로 인식
    }
}

People.setAge = 35; // set키워드를 추가했기 때문에 이러한 방식으로 함수 사용 가능

console.log(People.age); // 35

 

위와 같이 데이터를 입력하여 값을 추가하거나 수정하는 등의 작업을 하는 함수의 앞에 set을 붙여 사용할 수 있습니다.

기존의 People.setAge(35); 가 아닌 People.setAge = 35;의 방법으로 사용할 수 있습니다.

 

 

 

class에서 사용하는 getter / setter 

 

class에서도 get과 set을 사용할 수 있습니다.

 

class People {
    constructor(){
        this.name = 'Kim';
        this.age = 30;
    }
    get nextAge(){
        return this.age + 1;
    }
    set setAge(age){
        this.age = age;
    }
}

var People2 = new People();

People2.setAge = 33;

console.log(People2.age); // 33
console.log(People2.nextAge); // 34

 

위와 같이 class에서도 get과 set을 사용할 수 있으며 호출또한 일반적인 get / set 사용방법과 동일합니다.

 

최근 프레임워크(React, Vue.js, Angular)에서 이런식으로 데이터를 다룹니다.