JavaScript(getter, setter)

getter / setter

• getter : property를 읽을 때 동작.
• setter : property의 값을 쓸 때 호출.

getter 와 setter 문법을 얕게 설명하자면 오브젝트 내의 함수들을 괄호 없이 사용 가능한 키워드라고 할 수 있다.
그리고 깊게 설명하자면 데이터의 무결성을 보존하기 위해 사용하는 키워드이다.

예를들어, 내부의 동작 방법을 안으로 숨기고 사용자에겐 그 부품의 사용법만을
노출하고 있는 것이다. 따라서 객체의 데이터는 함부로 공개하지 않는다.
그래서 사용하는것이 getter와 setter이다. getter setter는 객체의 데이터에 직접 접근하지 않고 메소드를 통해 데이터에 접근,변경한다.

그리고 원본 데이터는 immutable(불변)해야 한다는 말이 있다.
즉, 데이터의 수정과 출력으로 인해 데이터의 원본이 실수로 변경되는 경우을 막기 위해 메서드를 사용하여 간접적으로 데이터를 다루는 것이 일종의 테크닉이라고 볼 수 있다.

함수로 object 데이터를 꺼내는 방법

예를 들어 나이를 +1 하고 싶어서 다음과 같은 코드를 작성할 수 있다.

var 사람 = {
  name : 'Kim',
  age : 30,
    var 사람 = {
  name : 'Kim',
  age : 30,
}
사람.age = 31;
console.log(사람.age); // 31
}

하지만, 만약 사람이라는 오브젝트 안에 배열의 배열의 배열 안에 있는 age를 변경하려면 어떻게 해야 할까? 즉 object 안의 데이터가 복잡할수록 데이터를 꺼내기가 어렵다. 또한 이제는 age의 값이 31로 완전히 변경되었으므로 30이라는 데이터를 사용할 수 없게 된다.

따라서 다음과 같은 코드를 작성할 수 있다.
+1 을 해주는 기능을 함수로 만들어 사용하는 것이다. 그리고 그 함수를 호출하면 기능이 수행되어 출력하면 31이 나온다.

var 사람 = {
  name : 'Kim',
  age : 30,
  nextAge(){
    return this.age + 1
  }
}
console.log(사람2.nextAge()); //31

함수로 object 데이터를 수정하는 방법

이번엔 age의 값을 변경하기 위해서 다음과 같은 코드를 작성하였다. 하

var 사람 = {
  name : 'Kim',
  age : 30,
  }
}
사람.age = 40;
console.log(사람.age); // 40

지만, 위에서의 설명과 같이 함수를 생성해서 사용하는 것이 좋다.

var 사람 = {
  name : 'Kim',
  age : 30,
  setAge(나이){
    this.age = 나이
  }
}
사람.setAge(40);
console.log(사람.age); //40

데이터 변경 시 실수를 줄이기 위해서 사용하는 함수이니 다음과 같은 함수를 사용하면 더욱 좋다. 만약 실수로 정수값이 아닌 문자값을 주었다면?
parseInt()를 통해 문자로 들어온 200을 정수화시켜준다.

var 사람 = {
  name : 'Kim',
  age : 30,
  setAge(나이){
    this.age = parseInt(나이)
  }
}
사람.setAge('200'); //문자 넣었는데도 숫자 200으로 저장됨

함수 쓰기 복잡하다면 get/set 키워드

함수를 호출하는 방식이다 보니, 소괄호를 써야하고 데이터를 집어넣기 복잡해볼일 수도 있다. 따라서 각각 데이터를 꺼내고, 변경하는 함수 앞에 get, set을 붙여주면 된다.
그리고 사람.nextAge()는 사람.nextAge 로, 사람.setAge(40)는 사람.setAge = 40로 사용이 가능하다. (개인적인 의견으로는 더 헷갈린 것 같지만 , get, set을 명시해줌으로써 어떤 기능을 하는 함수인지 알 수 있어서 좋은 것 같다.)

var 사람 = {
  name : 'Kim',
  age : 30,
   get nextAge(){
    return  this.age + 1  
  },
  set setAge(나이){
    this.age = parseInt(나이)
  }
}
사람.nextAge 
사람.setAge = 40;

주의)
get으로 사용되는 함수(데이터를 꺼내는 함수)는 반드시 리턴값이 존재햐아 한다.(당연히 데이터를 꺼내려고 함수를 호출했으니 리턴값이 존재하는 것이 맞다.)
set으로 사용되는 함수(데이터를 수정하는 함수)는 반드시 한개 이상의 파라미터가 존재해야 한다. (당연히 변경하련느 값이 파라미터를 통해 연결될테니)

class에서 사용하는 get/set

class 사람 {
  constructor(){
    this.name = 'Park';
    this.age = 20;
  }
  get nextAge(){
    return this.age + 1
  }
  set setAge(나이){
    this.age = 나이;
  }
}
var 사람1 = new 사람();
사람1.nextAge;
console.log(사람1.age); //20을 꺼내온다.
사람1.setAge = 50;
console.log(사람1.age); //20에서 50으로 수정한다.

응용

조건)
(1) data 오브젝트에는 setter 역할 함수가 하나 필요합니다.
setter 함수에 1,2,3,4 이렇게 아무 자연수나 파라미터로 입력하면 홀수는 odd, 짝수는 even 이라는 속성에 array 형태로 저장되어야합니다.

(2) data 오브젝트에는 getter 역할 함수가 하나 필요합니다.
getter 함수를 사용하면 odd, even에 저장된 모든 데이터들이 숫자순으로 정렬되어 출력되어야합니다.

 var data = {
        odd: [],
        even: [],
        홀짝판별(...rest) {
            for (i in rest) {
                if (rest[i] % 2 == 1) {
                    this.odd.push(rest[i]);
                }
                else {
                    this.even.push(rest[i]);
                }
            }
        },
        get 숫자졍렬() {
            return (
                this.odd = [...this.odd].sort(),
                this.even = [...this.even].sort()
            )
        }
    }
    data.홀짝판별(3, 1, 4, 2, 5);
    console.log(data); // data = { odd : [3,1,5], even : [4,2] }
    data.숫자졍렬;
    console.log(data); // data = { odd : [1,3,5], even : [2,4] }