JavaScript에서 super() 함수는 부모 클래스(parent class)의 생성자를 호출하거나, 객체의 부모 클래스에 정의된 메서드와 속성에 접근할 때 사용하는 키워드입니다.
super()의 주요 역할
super()는 크게 두 가지 용도로 활용됩니다.
1. 부모 클래스 생성자 호출: 자식 클래스의 constructor 내부에서 super()를 호출하면 부모 클래스의 생성자가 먼저 실행됩니다. 자식 클래스에서 this를 사용하기 전에 반드시 super()를 호출해야 한다는 점을 기억하세요.
2. 부모 클래스의 메서드 접근: super.msg()처럼 작성하면 오버라이딩되지 않은 부모 클래스의 원본 메서드를 그대로 호출할 수 있습니다. 특히 static 메서드 내부에서도 super를 통해 부모 클래스의 static 메서드에 접근할 수 있습니다.
예제 코드
아래 예제는 super를 사용하여 부모 클래스 Department의 static 메서드 msg()를 자식 클래스 Employee에서 호출하는 코드입니다. 브라우저에서 바로 실행해 볼 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<script>
class Department {
constructor() {}
static msg() {
return 'Hello';
}
}
class Employee extends Department {
constructor() {}
static displayMsg() {
return super.msg() + ' World!';
}
}
document.write(Employee.displayMsg());
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
Hello World!
Employee 클래스의 displayMsg() 메서드 내부에서 super.msg()가 부모 클래스인 Department의 msg() 메서드를 호출하여 'Hello'를 반환하고, 여기에 ' World!' 문자열이 연결되어 최종적으로 'Hello World!'가 출력되는 구조입니다.
정리
super()는 클래스 상속 구조에서 부모와 자식 간의 연결고리 역할을 합니다. 생성자 초기화 로직을 재사용하거나, 오버라이딩된 메서드에서 부모의 원본 기능을 유지하면서 확장하고 싶을 때 super()를 활용하면 코드의 중복을 줄이고 유지보수성을 높일 수 있습니다.