[코드스테이츠]-BeeBeeBee

BeeBeeBee문제를 해결하기 위해 이해해야 하는 과정

• 클래스와 인스턴스 이해하기
• 프로토타입 개념 학습하기
• 프로토타입의 체인 활용해보기

├── Grub
│   └── Bee
│       ├── HoneyMakerBee
│       └── ForagerBee

이 과정에 맞추어 문제를 해결해보자!

1️⃣ 단계 Grub 풀이 과정
< Grub class functionality >
✓ age 속성은 0이어야 합니다
✓ color 속성은 pink이어야 합니다
✓ food 속성은 jelly이어야 합니다
✓ eat 메소드가 존재해야 합니다
✓ eat 메소드를 통해 Grub이 젤리를 먹습니다

 class Grub {
  constructor() {
    this.age = 0; //
    this.color = "pink";
    this.food = "jelly";
  }

  eat() {
    return `Mmmmmmmmm ${this.food}`;
  }
}

👉 this를 생성하여 새로운 속성을 만들 수 있다.

2️⃣ 단계 Bee 풀이과정
< Bee class functionality >
✓ age 속성은 5이어야 합니다
✓ color 속성은 yellow이어야 합니다
✓ food 속성은 Grub으로부터 상속받습니다
✓ eat 메소드는 Grub으로부터 상속받습니다
✓ job 속성은 Keep on growing이어야 합니다

class Bee extends Grub {
  constructor() {
    super(); 
    this.age = 5;
    this.color = "yellow";
    this.job = "Keep on growing";
  }
}

👉 extends와 super를 활용하면 부모 클래스의 함수를 호출할 수 있다.
👉 extends와 super는 this위에서 사용해야 참조오류가 생기지 않는다.

3️⃣ 단계 HoneyMakerBee 풀이과정
< HoneyMakerBee class functionality >
✓ age 속성은 10이어야 합니다
✓ job 속성은 make honey이어야 합니다
✓ color 속성은 Bee로부터 상속받습니다
✓ food 속성은 Grub으로부터 상속받습니다
✓ eat 메소드는 Grub으로부터 상속받습니다
✓ honeyPot 속성은 0이어야 합니다
✓ makeHoney 메소드는 honeyPot에 1씩 추가합니다
✓ giveHoney 메소드는 honeyPot에 1씩 뺍니다

class HoneyMakerBee extends Bee {
  constructor() {
    super();
    this.age = 10;
    this.job = "make honey";
    this.honeyPot = 0;
  }
  makeHoney() {
    this.honeyPot++; 
  }
  giveHoney() {
    this.honeyPot--;
  }

👉 makeHoney()와 giveHoney()를 실행시킬 때에는 return은 사용하지 않아도 된다.
이 함수 자체가 honeyPot++, honeyPot--을 하기 위해만 존재하기 때문이다.

4️⃣ 단계 ForagerBee 풀이과정
< ForagerBee class functionality >
✓ age 속성은 10이어야 합니다
✓ job 속성은 find pollen이어야 합니다
✓ color 속성은 Bee로부터 상속받습니다
✓ food 속성은 Grub으로부터 상속받습니다
✓ eat 메소드는 Grub으로부터 상속받습니다
✓ canFly 속성은 true이어야 합니다
✓ treasureChest 속성은 빈 배열 []이어야 합니다
✓ forage 메소드를 통해 treasureChest 속성에 보물을 추가할 수 있어야 합니다

class ForagerBee extends Bee {
  constructor() {
    super();
    this.age = 10;
    this.job = "find pollen";
    this.canFly = true;
    this.treasureChest = [];
  }
  forage(items) {
    this.treasureChest.push(items);
  }
}

👉 treasureChest 속성에 보물을 추가하는 방법 : push 메소드 활용하기!

새로 알게 된 내용과 느낀 점

• extends와 super를 사용하여 부모 클래스의 함수를 호출할 수 있다는 점을 코드를 직접 작성해보며 이해할 수 있었다.
• return은 값이 필요할 때만 사용한다는 점 기억하기!