[JavaScript] Setters

하우즛 고잉 가이즈? 동기 여러분! 오늘은 어제 Getters에 이어 Setters에 대해 알아보도록 합시다. 점점 내용이 어려워지고 있지만 괜찮습니다. 하나씩 알아가다 보면 언젠가 전문가가 되는 날이 올 것입니다!

 

Setters

 

객체에서 프로퍼티는 두 가지 종류가 있습니다.

1. 데이터 프로퍼티(data property): 일반적인 프로퍼티입니다.

   // 데이터 프로퍼티
   
   let dongiRestaurant = {
       _kimchiJeyuk : 4500,
       _donKatsu : 5000
   }​

2. 접근자 프로퍼티(accessor property): 어제 get 메서드를 소괄호(Parentheses) 없이 호출이 가능하다고 말씀드리면서 이게 접근자 프로퍼티이기 때문에 가능하다고 했었습니다. 이 친구는 함수와 같은 성질을 가졌는데 값을 가질 땐 get, 설정할 땐 set의 역할을 담당합니다. 그래서 코드 밖에서도 소괄호 없이 호출이 가능합니다.

 

어제의 코드를 한번 살펴보도록 합시다.

const applePen = {
  _pen: 'pen',
  _apple: 'apple',
  get bamPenApple() {
    if (this._pen && this._apple) {
      return `${this._apple} ${this._pen}`;
    } else {
      return '애플팬 노래를 불러봅시다!';
    }
  }
}

console.log(applePen.bamPenApple);

// 출력 : apple pen

 

애플 팬에 관한 코드였습니다. 여기서 apple pen을 pineapple pen으로 바꿔 보도록 하겠습니다.

const applePen = {
  _pen: 'pen',
  _apple: 'apple',
  get bamPenApple() {
    if (this._pen && this._apple) {
      return `${this._apple} ${this._pen}`;
    } else {
      return '애플팬 노래를 불러봅시다!';
    }
  }
}

applePen.bamPenApple = 'pineapple pen';      // <- 이 부분이 추가됨
console.log(applePen.bamPenApple);

// 출력 : apple pen

 

하지만 출력 값은 그대로 apple pen이 나오는 것을 확인할 수 있습니다. 어찌 된 일일 까요? get은 가져오는 역할을 수행하는 접근자 프로퍼티라서 수정은 불가합니다. 그렇다면 여기서 set 메서드를 추가해서 출력 값을 수정해보도록 하겠습니다.

 

const applePen = {
  _pen: 'pen',
  _apple: 'apple',
  get bamPenApple() {
    if (this._pen && this._apple) {
      return `${this._apple} ${this._pen}`;
    } else {
      return '애플팬 노래를 불러봅시다!';
    }
  },
  set bamPenApple(str) {
    [this._apple, this._pen] = str.split(" ");
  }
}

applePen.bamPenApple = 'pineapple pen';
console.log(applePen.bamPenApple);

// 출력 : pineapple pen

set 메서드이름(매개변수) { 조건 };

위와 같은 방식으로 선언이 가능합니다. set을 추가하게 되면 applePen.bamPenApple = 'pineapple pen';이 이전 코드에서는 적용이 되지 않았지만 현재 코드에서는 적용이 되어 출력되는 모습을 볼 수 있습니다. 

 

제가 코드를 이것저것 짜 보다가 깨우친 건데 매개변수(Parameter)는 한 가지만 넣어 주셔야 합니다. (str1, str2) 이렇게 넣으니까 컴퓨터가 불같이 화를 내면서 "한 개만 넣어라!" 하더라고요 ㄷㄷㄷ

 

---

 

오늘의 느낌

역시 인간은 생각하는 동물이라 그런지 이해가 안 가는 내용도 한 번 두 번 세 번 반복해서 읽다가 보면 어느새 '오 이거!' 하면서 깨우치게 되더라고요. 하루 종일 봐도 이해가 안 가던 게 화장실 갔다가 이해가 되기도 하고 참 신기합니다.