새소식

프론트엔드 공부/자바스크립트

Beesbeesbees 과제

  • -

   반딧불   

 

Beesbeesbees과제 레퍼런스의 의사코드를 작성하여 블로깅하세요.


코드스테이츠 BeeBeeBee 과제. 아래 조건을 만족하게 js를 수정해야 한다.

Class 구조

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

과제의 요구조건

Bee class functionality
    ✓ `age` 속성은 `5`이어야 합니다
    ✓ `color` 속성은 `yellow`이어야 합니다
    ✓ `food` 속성은 Grub으로부터 상속받습니다
    ✓ `eat` 메소드는 Grub으로부터 상속받습니다
    ✓ `job` 속성은 `Keep on growing`이어야 합니다

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

  Grub class functionality
    ✓ `age` 속성은 `0`이어야 합니다
    ✓ `color` 속성은 `pink`이어야 합니다
    ✓ `food` 속성은 `jelly`이어야 합니다
    ✓ `eat` 메소드가 존재해야 합니다
    ✓ `eat` 메소드를 통해 `Grub`이 젤리를 먹습니다

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


첫번째로 가장 상위의 클래스를 찾는다. 해당 과제에서는 Grub 

class Grub {   // 과제에서 가장 상위에 있는 클래스
  // 클래스 객체의 초기값을 짖어하기 위해 객체가 생성될 때 실행되기로한 함수 constructor
  // constructor 함수는 언제 호출되나요? >> 객체를 생성할때 constructor 생성자 함수가 호출됨
  constructor() { 
  	// 조건1. `age` 속성은 `0`이어야 합니다
  	// 조건2. `color` 속성은 `pink`이어야 합니다
	// 조건3. `food` 속성은 `jelly`이어야 합니다
    // this >> 어떤 메소드에서 그 메소드가 속해 있는 객체를 가리키는 특수한 키워드를 this
    // 여기서 this는 객체 Grub
    this.age = 0;  // 조건1.
    this.color = 'pink'; // 조건2.
    this.food = 'jelly'; // 조건3.
  } 
  eat(){ // 조건4. `eat` 메소드가 존재해야 합니다, 조건5. `eat` 메소드를 통해 `Grub`이 젤리를 먹습니다
    return `Mmmmmmmmm ${this.food}`// 조건5에서 테스트에서 Mmmmmmmmm Jelly 출력되어야함.
  }
}
module.exports = Grub;

두번째 Bee 에서는 Grub의 속성과 메서드를 상속받아 사용하려한다.

이때 class에서 만들때 extends를 사용해서 다른 클래스의 자식클래스를 생성(Grub라는 클래스의 자식요소로 만드려는 Bee 클래스).

super() 와 super. 의 용법은 각각 무엇인가?
부모 클래스를 기반으로 새로운 기능을 추가 구현한 자식 클래스를 상속받아 만들었을 때,
super()를 통해 부모 클래스의 constructor를 호출하여 부모 클래스 초기 셋팅값을 사용할 수 있고,
super.[메소드 이름] 을 통해 부모의 메소드를 호출하여 자식 클래스의 메소드와 콜라보를 할 수 있다.
결국 기본적인 기능이 구현된 부모 클래스를 확장하여 사용자에게 필요한 기능을 추가한 자식 클래스를 사용하는데,
코드의 중복없이 재사용성이 좋은 코드를 만들 수 있어 사용자의 편의를 증대시키고 유지보수가 편한 강려크한 기능!

const Grub = require('./Grub');

class Bee extends Grub{ // extends 키워드로 Grub의 자식클래스로 생성
  /* 클래스 Bee에서 요구된 조건.
  1) `age` 속성은 `5`이어야 합니다 > 바뀌는건 다시 작성
  2) `color` 속성은 `yellow`이어야 합니다 > 바뀌는건 다시 작성
  3) `food` 속성은 Grub으로부터 상속받습니다 > 상속받는건 안적어도 그대로 갖고옴
  4) `eat` 메소드는 Grub으로부터 상속받습니다 > 상속받는건 안적어도 그대로 갖고옴
  5) `job` 속성은 `Keep on growing`이어야 합니다 > 없는것도 새로 작성
  */
  // 상속 클래스의 생성자에선 반드시 super()를 호출해야함.
  // super()는 this를 사용하기 전에 반드시 호출해야 합니다.
  // 상속을 받게 됐을 때 자식 클래스에서 새로운 요소를 추가할때 super를 사용하면 코드의 재사용을 줄일 수 있다.
  constructor(){
    super(); // 이전 부모클래스의 속성과 메서드를 가져오기위한 super() 함수;
    this.age = 5; // 조건 1 바뀐것 다시 작성 (오버라이딩)
    //오버라이딩,(method overriding)은 자식 클래스가 자신의 부모 클래스들 중 하나에 의해 
    //이미 제공된 함수 등을 특정한 형태로 구현하는 것을 말합니다. 부모 클래스에서 이미 정의된 함수 등을 자식 
    //클래스에서 같은 이름으로 사용하되 안에 들어가는 내용(기능, 속성 등)을 바꿔서 사용한다고 생각하면된다.
    this.color = 'yellow'; // 조건2. 오버라이딩
    this.job = `Keep on growing`; // 조건5. 없는것 추가 새로작성
    // 조건3,4는 적지 않아도 위 super를 통해 가져온 상태(상속 받음)
  }
}

module.exports = Bee;

만약 다른 클래스를 상속하는 경우, 기본 생성자는 자신의 매개변수를 부모 클래스의 생성자로 전달.

constructor(...args) {
  super(...args);
}

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

에서 HoneyMakerBee, ForagerBee는 둘 다 Bee를 부모로해서 상속받는 자식들

const Bee = require('./Bee');

class ForagerBee extends Bee{ // Bee 를 부모로 자식요소로 만든다.
  // 요구조건
  /*
    1) `age` 속성은 `10`이어야 합니다
    2) `job` 속성은 `find pollen`이어야 합니다
    3) `color` 속성은 `Bee`로부터 상속받습니다 > 상속 안적기
    4) `food` 속성은 `Grub`으로부터 상속받습니다 > 상속 안적기
    5) `eat` 메소드는 `Grub`으로부터 상속받습니다 > 상속 안적기
    6) `canFly` 속성은 `true`이어야 합니다
    7) `treasureChest` 속성은 빈 배열 `[]`이어야 합니다
    8) `forage` 메소드를 통해 `treasureChest` 속성에 보물을 추가할 수 있어야 합니다 
  */
  constructor(){
    super();
    this.age = 10; // 조건1 오버라이딩
    this.job = 'find pollen'; // 조건2 오버라이딩
    this.canFly = true; // 조건6 없는것 만듬
    this.treasureChest = []; // 조건7 없는것 만듬
    // 조건 3,4,5는 Bee에서 상속 받은 상태. 안적어도 됨
  }
  forage(honey){  // 조건8 forage 메소드 만듬. 
    this.treasureChest.push(honey) // 여기서 this는 ForagerBee. ForagerBee의 treasureChest배열에 추가
  }
}

module.exports = ForagerBee;

const Bee = require('./Bee');

class HoneyMakerBee extends Bee{ // Bee를 부모로 만든다
  // 요구조건
  /*
    1) `age` 속성은 `10`이어야 합니다
    2) `job` 속성은 `make honey`이어야 합니다
    3) `color` 속성은 `Bee`로부터 상속받습니다 > 상속
    4) `food` 속성은 `Grub`으로부터 상속받습니다 > 상속 
    5) `eat` 메소드는 `Grub`으로부터 상속받습니다 > 상속
    6) `honeyPot` 속성은 `0`이어야 합니다
    7) `makeHoney` 메소드는 `honeyPot`에 1씩 추가합니다
    8) `giveHoney` 메소드는 `honeyPot`에 1씩 뺍니다
  */
  constructor(){
    super();
    this.age = 10;
    this.job = 'make honey';
    this. honeyPot = 0;
  }
  makeHoney(){ // 조건7. 1씩 추가해주는 메소드
    this.honeyPot += 1;
  }
  giveHoney(){ // 조건8. 1씩 빼주는 메소드
    this.honeyPot -= 1;
  }
}

module.exports = HoneyMakerBee;

 

 

Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.