자바스크립트는 프로토타입 기반 언어이지만 ES6(ECMAScript 2015)부터는 클래스를 사용하여 상속을 구현할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. 이번 블로그에서는 자바스크립트에서 클래스 상속을 어떻게 확장할 수 있는지 알아보겠습니다.

클래스 상속 기본 구현

클래스 상속은 부모 클래스의 속성과 메서드를 자식 클래스가 상속받는 것을 의미합니다. 기본적으로 자식 클래스는 부모 클래스의 생성자를 호출하여 속성을 상속받고, 부모 클래스의 메서드를 자신의 메서드로 사용할 수 있습니다. 다음은 클래스 상속의 기본 구현 예시입니다.

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof woof!");
  }
}

const myDog = new Dog("Max");
myDog.sayHello(); // 출력: Hello, I'm Max
myDog.bark();     // 출력: Woof woof!

위 예시에서 Animal 클래스는 name 속성과 sayHello 메서드를 가지고 있습니다. Dog 클래스는 Animal 클래스를 상속받고, bark 메서드를 추가로 정의합니다. myDog 객체는 Dog 클래스의 인스턴스로 생성된 후, 상속된 메서드와 추가된 메서드를 모두 사용할 수 있습니다.

메서드 오버라이딩

자식 클래스는 부모 클래스의 메서드를 재정의하여 자신에게 맞게 바꿀 수 있습니다. 이를 메서드 오버라이딩이라고 합니다. 예를 들어, Animal 클래스의 sayHello 메서드를 자식 클래스인 Dog에서 재정의하여 다른 동작을 수행하도록 할 수 있습니다.

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

class Dog extends Animal {
  sayHello() {
    console.log(`Woof! I'm ${this.name}`);
  }
}

const myDog = new Dog("Max");
myDog.sayHello(); // 출력: Woof! I'm Max

위 예시에서 Dog 클래스의 sayHello 메서드가 Animal 클래스의 sayHello 메서드를 오버라이딩하였습니다. 따라서 Dog 클래스의 인스턴스인 myDog를 생성하고 sayHello 메서드를 호출하면, 변경된 동작이 실행됩니다.

부모 클래스 메서드 호출

자식 클래스에서 부모 클래스의 메서드를 호출하기 위해서는 super 키워드를 사용합니다. super 키워드를 통해 부모 클래스의 생성자를 호출하거나, 부모 클래스의 메서드를 호출할 수 있습니다. 아래 예시를 참고해보세요.

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

class Dog extends Animal {
  sayHello() {
    super.sayHello();
    console.log("Woof woof!");
  }
}

const myDog = new Dog("Max");
myDog.sayHello(); 
// 출력:
// Hello, I'm Max
// Woof woof!

위 예시에서 Dog 클래스의 sayHello 메서드 내에서 super.sayHello()를 호출하여 부모 클래스인 Animal 클래스의 sayHello 메서드를 실행한 후, 추가적인 동작을 수행합니다. 이를 통해 부모 클래스의 메서드를 확장할 수 있습니다.

결론

자바스크립트의 클래스 상속을 통해 코드의 재사용성과 구조를 개선할 수 있습니다. 클래스 상속을 사용하면 코드의 유지보수성을 향상시키고, 객체 지향 프로그래밍의 기본 원칙을 준수할 수 있습니다. 자바스크립트에서 상속을 다루는 방법을 익히고 적절하게 활용하면 보다 효율적이고 강력한 코드를 작성할 수 있습니다.