Javascript

[자바스크립트]클래스(class) [2] -Getter & Setter

이지영 2022. 6. 13. 12:48

✔Getter & Setter

얕게 말하자면 오브젝트 내의 함수들을 괄호없이 쓸 수 있게 만들어주는 키워드인데

깊숙히 들어가면 데이터의 무결성을 보존하기 위해 쓰는 키워드라고 보시면 됩니다

접근자 프로퍼티는 'getter(획득자)'와 ‘setter(설정자)’ 메서드로 표현됩니다. 객체 리터럴 안에서 getter와 setter 메서드는 get과 set으로 나타낼 수 있습니다.

getter :: property를 읽을 때 동작합니다. (데이터를 꺼내쓸때)
setter :: property에 값을 쓸 때 호출됩니다. (데이터를 변경할때)

1) Getter

getter는 어떤 프로퍼티(property)에 접근할 때마다 그 값을 계산하도록 해야 하거나 내부 변수의 상태를 명시적인 함수 호출 없이 보여주고 싶을 때 Javascript의 getter를 이용할 수 있습니다.

바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위를 의미합니다. 예를 들어 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바로 바인딩입니다.

프로퍼티(property)는 일부 객체 지향 프로그래밍 언어에서 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형입니다. 프로퍼티의 읽기와 쓰기는 일반적으로 게터(getter)와 세터(setter) 메소드 호출로 변환됩니다.

2) Setter

자바스크립트에서 setter는 특정한 속성에 값이 변경될 때마다 함수를 실행하는데 사용될 수 있습니다. Setter는 유사 property 타입을 생성하는 getter와 함께 사용됩니다.

getter와 setter는 class를 사용하는 사용자가 잘못 사용해도 오류를 방어할 수 있도록 할 수 있습니다.
아래 예시에서 확인해보도록 하겠습니다.

💡함수로 object 데이터를 꺼내 사용하기

-Setter 부분은 사람.setAge = '20'; 를 실행할 때마다 발생하는 부분입니다. set setAge(나이)함수의 변수명에 '20'값이 부여되며 실행됩니다.

- Getter 부분에서는 입력 받은 인자를 호출할 때마다 age+ 1 를 return 해주는 부분입니다

이렇게 사용해 주면 장점이

- object 안의 데이터가 복잡할 수록 함수 만들어놓는게 데이터 꺼내기 쉽습니다.

- 내부에 있는 name, age 변수를 건드리지 않아서 실수를 방지할 수 있어서 안전합니다.

특히 매우 긴 object 안에 원하는 자료 몇개만 뽑고 싶을 때

미리 저렇게 함수를 만들어놓으면 매번 기능개발해줄 필요가 없습니다.

💡 Class에서 사용하기

<getter 사용하기>

<setter 사용하기>

getter , setter 을 사용하면 데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다룰수 있습니다

💡 문제풀어보기

(문제설명)

다음과 같은 오브젝트가 있습니다.

var data = {
  odd : [],
  even : []
}

(1번 문제) data 오브젝트에는 setter 역할 함수가 하나 필요합니다.

setter 함수에 1,2,3,4 이렇게 아무 자연수나 파라미터로 입력하면 홀수는 odd, 짝수는 even 이라는 속성에 array 형태로 저장되어야합니다.

(2번 문제) data 오브젝트에는 getter 역할 함수가 하나 필요합니다.

getter 함수를 사용하면 odd, even에 저장된 모든 데이터들이 숫자순으로 정렬되어 출력되어야합니다.

예를 들면

data.setter함수(1,2,3,4,5) 이렇게 입력하면

data = { odd : [1,3,5], even : [2,4] }

이렇게 저장이 되어야합니다.

빨리 위의 역할을 하는 함수 두개를 data 오브젝트 내에 만들어보십시오.

(1번)

setter 함수를 만들고 파라미터로 숫자들을 입력하면 숫자들을 분류해서 각각 odd, even 이라는 array에 저장해야합니다.

근데 파라미터로 몇개가 들어올지 모르기 때문에 rest 파라미터를 써줌

var data = {
  odd : [],
  even : [],
  setter함수 : function(...숫자들){
    console.log(숫자들)
  }
};

data.setter함수(1,2,3);

쩜쩜쩜이라는 rest 기호를 쓰시면 입력된 파라미터들을 전부 array로 싸매줍니다. // [1, 2, 3]

숫자들[0]이 홀수면 odd에 push 해주고 짝수면 even에 push해주겠습니다

var data = {
  odd : [],
  even : [],
  setter함수 : function(...숫자들){
    숫자들.forEach(function(a){
      if ( a % 2 == 1 ) {
        this.odd.push(a)  //홀수일때
      } else {
        this.even.push(a)  //짝수일때
      }
    });
  }
};

data.setter함수(1,2,3);

💁‍♀️근데 여기서 에러가뜹니다 💁‍♀️

왜냐면 여기서 this.odd는 내 오브젝트의 odd속성을 뜻하는게 아니라 forEach안의 function(){} 안에서의 this는 다른 뜻입니다.

그래서 this를 위해 함수 모양을 arrow function으로 바꿔주면 됩니다 !

var data = {
  odd : [],
  even : [],
  setter함수 : function(...숫자들){
    숫자들.forEach((a)=>{
      if ( a % 2 == 1 ) {
        this.odd.push(a)  //홀수일때
      } else {
        this.even.push(a)  //짝수일때
      }
    });
  }
};

data.setter함수(1,2,3);

(2번)

array 두개를 합쳐주는 자바스크립트 문법을 사용해 주면됨

var data = {
  odd : [1,3],
  even : [2,4,6],
  get getter함수(){
    return [...this.odd, ...this.even ].sort()
  }
};

console.log(data.getter함수);

... 기호로 spread operator 문법을 이용하시면 this.odd 그리고 this.even이라는 array 두개를 쉽게 합칠 수 있습니다.

그리고 그걸 출력해주는 getter함수를 만듦