[JavaScript] getter,setter 알아보기

안녕하세요! 이번 글에는 객체지향에서 자주 쓰이는 getter, setter 개념에 대해 알아보도록 하겠습니다 :)

getter,setter란?

말그대로 getter는 정해놓은 값을 가져오는 것이고 setter은 정해놓은 값을 새롭게 다시 설정해주는 것입니다. 또한 데이터의 무결성을 보존하기 위해 데이터를 수정하거나 출력할대 직접 원본 데이터를 만지는게 아니라 간접적으로 다룰 수 있게 해주는 키워드라고 보면 됩니다.

코드 살펴보기

      class Unit {
        constructor() {
          (this.power = 5), (this.strength = 100);
        }

		//getter
        battlePoint() {
          return this.power + this.strength;
        }
		
        //setter
        heal(healing) {
          this.strength = this.strength + healing;
        }
      }

      let unit = new Unit();
      
      //setter 실행하기
      unit.heal(100);
      
      //205
      //getter실행하기
      console.log(unit.battlePoint());

• 예시로 기본 공격력은 5이고 체력은 100인 하나의 게임 캐릭터를 만들어주는 생성자를 생성하였습니다.

• getter를 만들기 위해선 prototype 선언 위치에 return 키워드를 넣은 함수형태를 선언합니다

• setter를 만들기 위해선 파라미터를 받을 함수의 매개변수를 선언하고 값을 설정하기 위한 식을 적어줍니다. 저는 heal()이라는 함수를 만든 후 그 숫자만큼 체력이 증가하도록 setting을 하였습니다.

setter,getter를 실행하기 위해선
인스턴스.setter명(파라미터), 인스턴스.getter명() 이런식으로 실행해주시면 됩니다.

---

추가적으로 사용할때 함수 호출 형태로 안쓰고 좀더 직관적으로 쓰는 방식도 있습니다.

      let data = {
        odd: [],
        even: [],
        setter(...rest) {
          rest.forEach((number) => {
            if (number % 2 == 0) {
              this.even.push(number);
            } else {
              this.odd.push(number);
            }
          });
        },
        get getter() {
          return [...this.odd, ...this.even].sort();
        },
      };

      data.setter(1, 23, 34, 653, 12, 33, 10);
      console.log(data.getter);

setter에 넣는 값들중 짝수는 even배열에, 홀수는 odd배열에 넣어주는 setter 식을 적었습니다. 그리고 getter에서 그 값들을 정렬해주는 방식으로 하였습니다.

getter() 앞에 get 키워드를 입력하면 getter 호출시 data.getter()가 아닌 data.getter로 소괄호 없이 사용이 가능합니다.
이는 set도 똑같이 쓸 수 있으며, 파라미터를 집어 넣기 위해선 data.setter = 13 이런식으로 사용하시면 됩니다.

---

참고자료

getter- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

setter - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set