2-3. [JavaScript] 객체지향 과제

 

# Beesbeesbees

 

객체 지향에서 배운 내용을 바탕으로 꿀벌의 발달 단계를 나타내는 꿀벌 클래스 만들기 과제이다.

 

Class Structure

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

 

최종 코드의 구조이다.

Grub은 Bee의 부모,

Bee는 HoneyMakerBee와 ForagerBee의 부모이다.

 

 

---

# Grub

 

class Grub {
  constructor() {
    this.age = 0;
    this.color = "pink";
    this.food = "jelly";
  }
  eat() {
    return `Mmmmmmmmm jelly`;
  }
}

module.exports = Grub;

 

  Grub class functionality

    ✓ `age` 속성은 `0`이어야 합니다

    ✓ `color` 속성은 `pink`이어야 합니다

    ✓ `food` 속성은 `jelly`이어야 합니다

    ✓ `eat` 메서드가 존재해야 합니다

    ✓ `eat` 메서드는 `Mmmmmmmmm jelly`를 리턴합니다.

 

 

해당 클래스에서 속성과 메서드는 다음과 같습니다:

 

속성	메서드
age color food	eat()
이 클래스의 속성은 객체의 상태나 특성을 나타내며, 메서드는 객체의 동작을 정의합니다.

 

 

질문) 자바 스크립트에서 속성과 메서드는 자식에게 속성되니? 그리고 자식단계에서 따로 속성이나 메서드를 수정하지 않는다면 그대로 자식의 자식에게 속성되니?

답변) JavaScript에서 클래스의 속성과 메서드는 상속 계층에서 하위 클래스 또는 자식 클래스에 상속됩니다.  이것은 부모 클래스에서 정의한 속성과 메서드가 자식 클래스에 자동으로 상속되는 기본 동작입니다. 만약 자식 클래스에서 속성이나 메서드를 수정하지 않는다면,  그 속성과 메서드는 그대로 자식 클래스의 하위 클래스 또는 자식의 자식 클래스에게도 상속됩니다.  이것은 프로토타입 체인을 통해 이루어지는 상속의 핵심 개념입니다.  따라서 상속 계층 구조에서는 부모 클래스에서 정의한 내용이 하위 클래스까지 전파됩니다. 만약 자식 클래스에서 부모 클래스의 메서드를 덮어쓰거나 수정한다면,  그 수정된 버전이 자식 클래스 및 하위 클래스에 적용됩니다.  이것은 다형성(polymorphism)의 개념과 관련이 있습니다.  이렇게 하위 클래스에서 메서드를 수정하는 것은 자식 클래스에 맞게 동작을 재정의(override)하는 것이라고 볼 수 있습니다. 😉

 

 

---

 

# Bee

 

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

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

module.exports = Bee;

 

  Bee class functionality

    ✓ `age` 속성은 `5`이어야 합니다

    ✓ `color` 속성은 `yellow`이어야 합니다

    ✓ `food` 속성은 Grub으로부터 상속받습니다

    ✓ `eat` 메서드는 Grub으로부터 상속받습니다

    ✓ `job` 속성은 `Keep on growing`이어야 합니다

 

 

---

# extends

extends?

extends는 JavaScript 클래스에서 사용되는 키워드로,
클래스 상속을 구현하는 데 사용됩니다.
클래스 상속은 객체 지향 프로그래밍에서 중요한 개념 중 하나로,
부모 클래스(또는 슈퍼 클래스)의 특성을
자식 클래스(또는 서브 클래스)가 상속받아 재사용하거나 확장할 수 있도록 합니다.


extends 키워드는 다음과 같이 사용됩니다:

class Parent {
  // 부모 클래스의 속성과 메서드 정의
}

class Child extends Parent {
  // 자식 클래스의 속성과 메서드 정의
}​

이렇게 하면 Child 클래스는 Parent 클래스의 모든 속성과 메서드를 상속받게 됩니다. 
자식 클래스는 부모 클래스의 특성을 그대로 사용하거나 재정의하여 자신만의 동작을 추가할 수 있습니다.

예를 들어, 다음과 같은 코드에서 Child 클래스가 Parent 클래스를 확장하고 
부모 클래스의 sayHello 메서드를 재정의하여 추가 기능을 더할 수 있습니다:

class Parent {
  sayHello() {
    console.log('Hello from Parent');
  }
}

class Child extends Parent {
  sayHello() {
    super.sayHello(); // 부모 클래스의 메서드 호출
    console.log('Hello from Child');
  }
}

이렇게 하면 Child 클래스는 Parent 클래스의 기능을 상속하고 확장합니다. 
이를 통해 코드의 재사용성과 유지 관리성을 높일 수 있습니다.

 

 

---

#super

super?


super는 JavaScript 클래스에서 사용되는 특수한 키워드로,
부모 클래스 (또는 상위 클래스)의 생성자를 호출하는 데 사용됩니다.

super는 자식 클래스의 생성자 내에서 호출될 때, 부모 클래스의 생성자를 실행하여 상속 관련 설정을 초기화합니다.

일반적으로 super는 다음 두 가지 방법으로 사용됩니다:

1. super()는 자식 클래스의 생성자 내에서 부모 클래스의 생성자를 호출합니다.
이것은 자식 클래스가 부모 클래스의 속성을 상속하고 초기화하는 데 사용됩니다.
예를 들어:

class Parent {
  constructor(name) {
    this.name = name;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 부모 클래스의 생성자 호출
    this.age = age;
  }
}​

2. super.methodName()은 자식 클래스에서 부모 클래스의 메서드를 호출하는 데 사용됩니다. 
  이것은 자식 클래스가 부모 클래스의 메서드를 재사용하거나 확장할 때 유용합니다.

class Parent {
  sayHello() {
    console.log('Hello from Parent');
  }
}

class Child extends Parent {
  sayHello() {
    super.sayHello(); // 부모 클래스의 메서드 호출
    console.log('Hello from Child');
  }
}

super를 사용하면 자식 클래스가 부모 클래스의 기능을 활용하거나 재정의할 수 있으며, 
상속 관련 작업을 보다 효과적으로 처리할 수 있습니다.

 

 

 

---

# ForagerBee

 

 

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

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

module.exports = ForagerBee;

 

ForagerBee class functionality

    ✓ `age` 속성은 `10`이어야 합니다

    ✓ `job` 속성은 `find pollen`이어야 합니다

    ✓ `color` 속성은 `Bee`로부터 상속받습니다

    ✓ `food` 속성은 `Grub`으로부터 상속받습니다

    ✓ `eat` 메서드는 `Grub`으로부터 상속받습니다

    ✓ `canFly` 속성은 `true`이어야 합니다

    ✓ `treasureChest` 속성은 빈 배열 `[]`이어야 합니다

    ✓ `forage` 메서드를 통해 `treasureChest` 속성에 보물을 추가할 수 있어야 합니다

 

class ForagerBee는 Bee의 자식이다. 따라서 extends Bee를 사용했다.

 

또한 빈 배열인 treasureChest를 주고

 

메서드 forage를 이용해서 속성에 보물을 추가했다.

 

  forage(treasure) {
    this.treasureChest.push(treasure);
  }

---

# HoneyMakerBee

 

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

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

module.exports = HoneyMakerBee;

 

 

  HoneyMakerBee class functionality

    ✓ `age` 속성은 `10`이어야 합니다

    ✓ `job` 속성은 `make honey`이어야 합니다

    ✓ `color` 속성은 `Bee`로부터 상속받습니다

    ✓ `food` 속성은 `Grub`으로부터 상속받습니다

    ✓ `eat` 메서드는 `Grub`으로부터 상속받습니다

    ✓ `honeyPot` 속성은 `0`이어야 합니다

    ✓ `makeHoney` 메서드는 `honeyPot`에 1씩 추가합니다

    ✓ `giveHoney` 메서드는 `honeyPot`에 1씩 뺍니다

 

 

처음에 구조도를 못보고 HoneyMakerBee가 ForagerBee의 자식인줄 알았다.

그래서 제일 첫줄 코드도 수정해보고 extends도 수정했지만.. 테스트 통과가 안되어서

다시 읽어보고 알았다!

 

HoneyMakerBee 는 Bee의 자식이니 extends를 이용했다.

또한 상속받는 속성들은 super()으로 표시했다.

 

그리고 honeyPot 속성 설정 이후

밑에서 메서드에 +, - 되는 코드를 작성했다.

 

 

---

# 퀴즈 정리

 

생성자 (constructor) 함수

클래스 내에서 생성자 함수는 하나만 있을 수 있습니다.

생성자 함수는 인스턴스 객체를 생성하고 초기화하는 특별한 메서드입니다.

생성자 함수를 작성하지 않으면, 기본 생성자(default constructor)가 제공되며,

기본(base) 클래스일 경우는 기본 생성자는 비어있으며,

파생(derived) 클래스일 경우 기본 생성자는 부모 생성자를 부릅니다.

 

super 키워드

super 키워드는 부모 클래스의 함수를 호출할 때 사용됩니다.

생성자 함수 내에서 쓰일때는, super 키워드는 한번만 호출할 수 있습니다.

this 키워드가 사용되기 전에 사용되어야 하며, 그렇지 않을 경우 Reference 에러가 납니다.

생성자 함수 내에서 super를 호출하면 부모 클래스의 생성자 함수를 호출합니다.

 

JavaScript는 프로토타입 기반 언어이며, DOM도 프로토타입으로 상속을 구현하였습니다.

 

 

---

 

이번 과제를 통해서

객체 지향 코드를 작성하고 개념에 대해서 다시 상기시키고 이해할 수 있었다.

 

사실 글로만 보고 잘 이해가 안되었는데,

직접 구조를 보고 코드를 만들면서 이해를 하게 되었다.

 

또한 퀴즈를 통해 놓쳤던 개념들을 한번 더 확인할 수 있었다 !

 

 

 

 

꿀벌

끝! .....🐝