[JS] 상속받은 서브 클래스에서의 this에러

❗문제발생!

export default class AppError extends Error {
  static PREFIX = "[ERROR]";
  constructor(message) {
    super(`\\n${AppError.PREFIX} ${message}\\n`);
    this.name = this.constructor.name;
  }
}

Error를 커스텀하여 사용하기 위해, 다음과 같은 코드를 사용하였습니다.

저는 여기서 static 키워드를 사용 것에 대한 의문을 가졌습니다.

하지만 static을 뺀 아래 코드는 에러가 발생하였습니다.

export default class AppError extends Error {
  PREFIX = "[ERROR]";
  constructor(message) {
    super(`\\n${this.PREFIX} ${message}\\n`); // ERROR 발생!
    this.name = this.constructor.name;
  }
}

❓왜 에러가 발생했을까?

이는 super()함수와 연관있습니다.

super는 부모 클래스를 참조할 수 있는 키워드인데요, super메서드의 특징은 다음과 같습니다.

1. constructor 내부에서만 사용할 수 있다.
2. super()를 호출하기 이전 this를 사용할 수 없다.

즉 위에서 오류가 발생한 이유는, super()가 호출되기 이전 this에 접근하여 PREFIX로 인스턴스에 접근하려고 했기 때문이었습니다.

static으로 선언하면, 클래스를 통해 접근이 가능하여 static을 작성해주는 것이었습니다.