상속과 super 키워드 그리고 오버라이딩까지 쉽게 알아보기 🐶

이번에는 자바스크립트 클래스의 상속, super 키워드, 그리고 오버라이딩에 대해 알아보겠습니다! 상속은 객체지향 프로그래밍의 핵심 개념으로, 이미 만들어진 클래스를 확장하여 새로운 클래스를 만들 수 있게 해주는데요! 예제를 통해 어떤 의미인지 자세하게 살펴보겠습니다 🙌🏼

🎯 1. 기본 클래스와 상속의 개념

먼저, 상속이란 어떤 클래스가 다른 클래스의 속성과 메서드를 물려받는 것을 의미합니다. 이를 통해 기존 클래스를 확장하거나 기능을 재사용할 수 있죠. 다음 코드를 보며 기본적인 클래스와 이를 상속하는 클래스를 만들어보겠습니다.

class Dog {
  type;
  size;

  constructor(type, size) {
    this.type = type;
    this.size = size;
  }

  sayHello() {
    return `안녕하세요 ${this.type}입니다.`;
  }
}

위 코드는 Dog라는 클래스를 만들었습니다. 이제 Dog 클래스를 상속받는 WhiteDog 클래스를 만들어보겠습니다.

class WhiteDog extends Dog {
  color;

  constructor(type, size, color) {
    super(type, size); // 부모 클래스의 생성자를 호출합니다.
    this.color = color;
  }

  sayHello() { 
    return `${super.sayHello()} 저의 사이즈는 ${this.size}입니다.`; // 부모의 메서드를 오버라이드합니다.
  }
}

🎯 2. super 키워드의 역할

• super 키워드는 부모 클래스의 생성자나 메서드를 호출할 때 사용합니다.
• super()를 호출하면 부모 클래스의 생성자가 실행되어, 부모 클래스의 속성들을 초기화할 수 있습니다.
• 상속받은 클래스에서 부모의 기능을 그대로 가져오고 싶을 때 super를 사용해 호출합니다.

📝 예제 코드: super 키워드로 부모의 생성자 사용하기

class WhiteDog extends Dog {
  constructor(type, size, color) {
    super(type, size); // 부모 클래스의 생성자를 호출
    this.color = color; // 추가적인 속성은 여기에서 초기화
  }
}

 

• super(type, size)를 호출함으로써 Dog 클래스의 생성자에서 type과 size를 초기화해주었습니다.
• 만약 super()를 호출하지 않고 this를 먼저 사용하려고 하면 에러가 발생합니다. 반드시 super()를 먼저 호출해야 합니다.

🎯 3. 메서드 오버라이딩

• 오버라이딩은 부모 클래스의 메서드를 자식 클래스에서 다시 정의하는 것을 의미합니다.
• sayHello() 메서드를 WhiteDog 클래스에서 오버라이드하여 부모의 기능에 추가적인 동작을 더할 수 있습니다.

📝 예제 코드: 메서드 오버라이딩

class WhiteDog extends Dog {
  sayHello() {
    return `${super.sayHello()} 저의 사이즈는 ${this.size}입니다.`; // 부모의 메서드를 재사용하면서 새 기능 추가
  }
}

 

• 여기서는 super.sayHello()로 부모 클래스의 sayHello() 메서드를 호출하면서 그 결과에 추가 문구를 붙였습니다.

🎯 4. 활용 예시

const maltese = new WhiteDog('말티즈', 'small', 'white');
console.log(maltese); // WhiteDog { type: '말티즈', size: 'small', color: 'white' }
console.log(maltese.sayHello()); // "안녕하세요 말티즈입니다. 저의 사이즈는 small입니다."

 

• WhiteDog 클래스는 Dog 클래스를 상속받아 type과 size 속성뿐만 아니라 새로운 속성인 color도 추가했습니다.
• 또한, sayHello() 메서드를 오버라이드하여 부모 클래스의 메서드에 기능을 확장했습니다.

---

⭐ 중요: 상속을 사용할 때의 유용한 팁

• super 키워드는 부모의 생성자를 호출할 때만 쓸 수 있습니다. 일반 메서드 내부에서 super로 부모의 메서드를 호출할 수 있지만, 부모의 속성에 직접 접근하는 것은 불가능합니다. 즉, super.type 같은 접근은 안 된다는 점을 기억하세요!
• 오버라이딩을 통해 부모 클래스의 메서드를 확장하여 새로운 동작을 추가할 수 있습니다. 이때, 부모의 기능을 그대로 유지하면서도 자식 클래스에 새로운 기능을 추가할 때 유용합니다.

📌 결론

• 상속은 클래스 간의 코드 재사용을 가능하게 해주며, super 키워드는 부모 클래스의 생성자나 메서드를 호출할 때 사용합니다.
• 상속받은 클래스에서 부모의 메서드를 변경(오버라이딩)할 수 있으며, 부모의 메서드를 그대로 가져오고 싶다면 super.메서드명()을 사용하면 됩니다.

🛠 실무적인 팁

• 상속은 재사용을 위해 남발하지 말아야 합니다. 모든 상황에 상속을 적용하면 코드가 복잡해질 수 있으므로, 상속은 클래스 간에 명확한 관계가 있을 때만 사용하세요.
• 부모 클래스의 속성을 확장하려는 경우, 꼭 필요한 경우가 아니라면 상속보다는 컴포지션(Composition)을 고려해보세요. 컴포지션은 객체를 포함하여 기능을 확장하는 방식으로 더 유연하게 사용할 수 있습니다.

이번에는 상속, super, 그리고 오버라이딩에 대해 자세히 알아보았습니다! 클래스 상속을 통해 코드의 재사용성을 높이되, 무작정 사용하는 것보다 필요한 상황에서 적절히 사용하는 것이 중요하답니다! 😊