super 사용하기

Coddy JavaScript 여정의 객체 지향 프로그래밍 섹션에 포함된 레슨 — 56개 중 37번째.

메서드를 오버라이드할 때, super.methodName()을 사용하여 부모의 원래 버전에 여전히 접근할 수 있습니다. 이를 통해 부모의 동작을 완전히 대체하는 대신 확장하거나 수정할 수 있습니다.

메서드가 있는 부모 클래스를 생성합니다:

class Animal {
  makeSound() {
    return "Generic animal sound";
  }
}

부모 클래스를 상속받는 자식 클래스를 생성합니다:

class Dog extends Animal {
  makeSound() {
    // 먼저 부모의 메서드를 호출합니다
    const parentSound = super.makeSound();
    // 그런 다음 추가 기능을 확장합니다
    return `${parentSound}, but also Woof!`;
  }
}

자식 클래스의 인스턴스를 생성합니다:

const myDog = new Dog();
console.log(myDog.makeSound());
// 출력: "일반적인 동물 소리, 하지만 역시 멍멍!"

super 키워드를 사용하면 자식 클래스에서 자신만의 기능을 추가하면서도 부모 클래스의 메서드를 호출할 수 있습니다.

챌린지

calculateArea() 메서드가 있는 Shape 클래스와 이를 상속받는 Rectangle 클래스가 주어집니다. 여러분의 작업은 super를 사용하여 Rectangle 클래스의 calculateArea() 메서드를 오버라이드(override)하는 것입니다.

Rectangle 클래스의 calculateArea() 메서드를 완성하여 다음을 수행하세요:

super를 사용하여 부모의 calculateArea() 메서드를 호출하고 그 결과를 저장합니다.
사각형의 실제 면적을 계산합니다: width × height
부모의 메시지와 사각형의 면적을 결합한 문자열을 반환합니다. 예: Calculating area... Rectangle area: 50

치트 시트

오버라이딩할 때 부모 클래스의 원래 메서드에 접근하려면 super.methodName()을 사용하세요:

class Animal {
  makeSound() {
    return "Generic animal sound";
  }
}

class Dog extends Animal {
  makeSound() {
    const parentSound = super.makeSound();
    return `${parentSound}, but also Woof!`;
  }
}

const myDog = new Dog();
console.log(myDog.makeSound());
// 출력: "Generic animal sound, but also Woof!"

이를 통해 부모의 기능을 완전히 대체하는 대신 확장할 수 있습니다.

직접 해보기

import { Shape } from './shapes.js';
import { Rectangle } from './shapes.js';

// 테스트 코드 - 수정하지 마세요
const rectangle = new Rectangle(5, 10);
console.log(rectangle.calculateArea()); // 예상 결과: "Calculating area... Rectangle area: 50"