[Javascript]자바스크립트 super와 override 완벽 이해하기

자바스크립트는 객체 지향 프로그래밍(OOP)을 지원하며, 이는 코드 재사용성과 유지보수성을 크게 향상시킵니다. 이러한 객체 지향 프로그래밍에서 핵심 개념 중 하나가 상속(inheritance)이며, 이때 super와 override가 중요한 역할을 합니다. 이번 포스팅에서는 super와 override의 개념과 사용법을 자세히 알아보겠습니다. 이를 통해 자바스크립트의 객체 지향 프로그래밍을 한 단계 더 깊이 이해할 수 있을 것입니다.

≣ 목차

• super 키워드의 개념과 활용💡
• override(오버라이드)의 개념과 활용🔄
• super와 override를 함께 사용하기🎯
• 결론 및 요약📚

상속에 관한 내용은 아래 포스팅을 참고해 주세요😁

[자바스크립트]javascript 상속 완벽 가이드: 기본 개념부터 실전 예제까지

---

01. super 키워드의 개념과 활용💡

super의 정의

super는 ES6(ECMAScript 2015)에서 도입된 키워드로, 자바스크립트 클래스 상속에서 부모 클래스의 생성자나 메서드를 호출할 때 사용됩니다. 자식 클래스에서 부모 클래스의 속성이나 메서드를 참조할 때 super를 사용하여 이를 명확하게 구분할 수 있습니다.

---

super를 사용하는 이유

상속을 통해 부모 클래스의 기능을 자식 클래스에서 재사용하고 확장하기 위해 super를 사용합니다. 이를 통해 코드 중복을 줄이고, 클래스 간의 명확한 관계를 유지할 수 있습니다.

---

super의 기본 사용법 예제 코드

다음은 super 키워드를 사용하는 간단한 예제입니다. 이 예제에서는 Parent 클래스의 생성자와 메서드를 Child 클래스에서 호출하는 방법을 보여줍니다.

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

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

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

    greet() {
        super.greet(); // 부모 클래스의 메서드 호출
        console.log(`I am ${this.age} years old`);
    }
}

const child = new Child('John', 25);
child.greet();
// 출력:
// Hello, my name is John
// I am 25 years old

상속 관계에서의 super 활용

위 예제에서 super(name)은 부모 클래스의 생성자를 호출하여 name 속성을 초기화합니다. 또한 super.greet()은 부모 클래스의 greet 메서드를 호출하여 부모 클래스의 기능을 재사용합니다. 이렇게 super를 사용하면 자식 클래스에서 부모 클래스의 기능을 확장하거나 덮어쓸 수 있습니다.

---

super를 사용할 때 주의사항

• super는 자식 클래스의 생성자 내에서 호출되어야 하며, 반드시 this 키워드를 사용하기 전에 호출되어야 합니다. 그렇지 않으면 오류가 발생합니다.
• super는 클래스 내부에서만 사용 가능합니다. 클래스 외부에서 super를 호출하면 문법 오류가 발생합니다.

---

02. override(오버라이드)의 개념과 활용🔄

오버라이드의 정의

오버라이드는 자식 클래스에서 부모 클래스의 메서드를 재정의하는 것을 말합니다. 이를 통해 자식 클래스는 부모 클래스의 메서드를 자신의 필요에 맞게 변경할 수 있습니다. 오버라이드는 객체 지향 프로그래밍에서 다형성을 구현하는 데 중요한 역할을 합니다.

---

자바스크립트에서 메서드 오버라이드의 필요성

자바스크립트의 클래스 상속에서 자식 클래스는 부모 클래스의 모든 메서드를 상속받습니다. 하지만 특정 메서드의 동작을 자식 클래스에 맞게 변경해야 할 경우, 메서드를 오버라이드하여 새로운 동작을 정의할 수 있습니다.

---

오버라이드의 기본 사용법 예제 코드

다음은 자식 클래스에서 부모 클래스의 메서드를 오버라이드하는 간단한 예제입니다.

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

class Child extends Parent {
    greet() {
        console.log('Hello from Child');
    }
}

const child = new Child();
child.greet(); // 출력: Hello from Child

위 예제에서 Child 클래스는 Parent 클래스의 greet 메서드를 오버라이드하여 자신만의 greet 메서드를 정의했습니다. 결과적으로 Child 객체의 greet 메서드를 호출하면 부모 클래스의 메서드가 아닌 자식 클래스의 메서드가 실행됩니다.

---

override 주의사항 및 팁

• 부모 클래스의 메서드를 오버라이드할 때는 메서드 시그니처(메서드 이름과 매개변수 리스트)가 동일해야 합니다.
• 오버라이드된 메서드에서 부모 클래스의 메서드를 호출하려면 super 키워드를 사용해야 합니다.
• 오버라이드는 코드의 재사용성을 높이고, 클래스 간의 명확한 역할 분담을 가능하게 합니다.

---

03. super와 override를 함께 사용하기🎯

super와 override를 조합한 실전 예제

super와 override를 함께 사용하면 부모 클래스의 메서드를 확장하거나 재정의할 때 유용합니다. 자식 클래스에서 부모 클래스의 메서드를 오버라이드하면서, 부모 클래스의 메서드를 super를 통해 호출하여 기존 기능을 유지하고 추가 기능을 구현할 수 있습니다.

다음 예제는 super와 override를 함께 사용하는 방법을 보여줍니다.

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

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

const child = new Child();
child.greet();
// 출력:
// Hello from Parent
// Hello from Child

이 예제에서 Child 클래스는 Parent 클래스의 greet 메서드를 오버라이드하고, super.greet()을 호출하여 부모 클래스의 greet 메서드를 실행한 후, 추가로 "Hello from Child"를 출력합니다.

---

상속 관계에서의 super 호출과 메서드 오버라이드

상속 관계에서 super와 오버라이드를 적절히 사용하면 자식 클래스가 부모 클래스의 기능을 확장하거나 덮어쓸 수 있습니다. 다음 예제에서는 더 복잡한 상속 구조에서 super와 오버라이드를 활용하는 방법을 설명합니다.

class Animal {
    makeSound() {
        console.log('Some generic animal sound');
    }
}

class Dog extends Animal {
    makeSound() {
        super.makeSound(); // 부모 클래스의 메서드 호출
        console.log('Bark');
    }
}

class Labrador extends Dog {
    makeSound() {
        super.makeSound(); // 부모 클래스(Dog)의 메서드 호출
        console.log('Woof');
    }
}

const myLabrador = new Labrador();
myLabrador.makeSound();
// 출력:
// Some generic animal sound
// Bark
// Woof

위 예제에서 Labrador 클래스는 Dog 클래스를 상속받고, Dog 클래스는 Animal 클래스를 상속받습니다. Labrador 클래스에서 makeSound 메서드를 오버라이드하고 super.makeSound()를 호출하여 Dog 클래스의 makeSound 메서드를 실행한 후, 추가로 "Woof"를 출력합니다. Dog 클래스의 makeSound 메서드는 다시 Animal 클래스의 makeSound 메서드를 호출하여 "Some generic animal sound"를 출력합니다.

---

코드로 이해하는 복잡한 상속 구조

복잡한 상속 구조에서도 super와 오버라이드를 적절히 사용하면 클래스 간의 관계를 명확히 하고 코드의 유지보수성을 높일 수 있습니다. 다음 예제는 여러 단계의 상속 구조에서 super와 오버라이드를 사용하는 방법을 보여줍니다.

class Vehicle {
    start() {
        console.log('Starting the vehicle');
    }
}

class Car extends Vehicle {
    start() {
        super.start(); // 부모 클래스(Vehicle)의 메서드 호출
        console.log('Starting the car');
    }
}

class ElectricCar extends Car {
    start() {
        super.start(); // 부모 클래스(Car)의 메서드 호출
        console.log('Starting the electric car');
    }
}

const myElectricCar = new ElectricCar();
myElectricCar.start();
// 출력:
// Starting the vehicle
// Starting the car
// Starting the electric car

위 예제에서 ElectricCar 클래스는 Car 클래스를 상속받고, Car 클래스는 Vehicle 클래스를 상속받습니다. ElectricCar 클래스의 start 메서드는 super.start()를 통해 Car 클래스의 start 메서드를 호출하고, Car 클래스의 start 메서드는 다시 Vehicle 클래스의 start 메서드를 호출합니다. 이로써 각 클래스의 start 메서드가 순차적으로 실행됩니다.

---

04. 결론 및 요약📚

super와 override의 핵심 요약

super와 오버라이드는 자바스크립트의 객체 지향 프로그래밍에서 중요한 개념으로, 상속 관계에서 부모 클래스와 자식 클래스 간의 기능을 재사용하고 확장할 수 있게 합니다.

super

• 정의: 부모 클래스의 생성자나 메서드를 호출할 때 사용되는 키워드.
• 사용 이유: 자식 클래스에서 부모 클래스의 기능을 재사용하고 확장하기 위해 사용.
• 예제

class Parent {
    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

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

    greet() {
        super.greet(); // 부모 클래스의 메서드 호출
        console.log(`I am ${this.age} years old`);
    }
}

const child = new Child('John', 25);
child.greet();
// 출력:
// Hello, my name is John
// I am 25 years old

---

override (오버라이드)

• 정의: 자식 클래스에서 부모 클래스의 메서드를 재정의하는 것.
• 사용 이유: 자식 클래스에서 부모 클래스의 메서드를 자신의 요구에 맞게 변경하기 위해 사용.
• 예제

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

class Child extends Parent {
    greet() {
        console.log('Hello from Child');
    }
}

const child = new Child();
child.greet(); // 출력: Hello from Child

---

super와 override를 함께 사용하기

• 정의: 자식 클래스에서 부모 클래스의 메서드를 오버라이드하면서 super를 사용하여 부모 클래스의 메서드를 호출하는 것.
• 사용 이유: 부모 클래스의 기본 동작을 유지하면서 자식 클래스에서 추가적인 동작을 수행하기 위해 사용.
• 예제

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

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

const child = new Child();
child.greet();
// 출력:
// Hello from Parent
// Hello from Child

---

결론

super와 오버라이드는 상속을 통해 부모 클래스의 기능을 재사용하고, 자식 클래스의 요구에 맞게 기능을 변경하거나 확장할 수 있게 합니다. 이를 통해 코드의 재사용성을 높이고, 명확한 클래스 구조를 유지할 수 있습니다.