JavaScript에서 '~ is not a constructor'(생성자가 아닙니다) 오류는 실제로 생성자(constructor)가 아닌 객체나 변수를 마치 생성자처럼 사용하려고 할 때 발생합니다.
오류가 발생하는 이유
이 오류는 주로 다음과 같은 경우에 나타납니다.
- 숫자, 문자열 등 일반적인 값(원시 타입)을
new키워드와 함께 호출하는 경우 - 화살표 함수(arrow function)를 생성자로 사용하려는 경우 — 화살표 함수는 자체
this바인딩을 가지지 않기 때문에 생성자로 사용할 수 없습니다. - 모듈에서 잘못된 방식(default import vs named import)으로 클래스를 가져온 경우
아래 코드는 변수를 생성자로 사용했을 때 이 오류가 어떻게 발생하는지 보여주는 예시입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>생성자가 아닙니다(Not a constructor) 오류</h1>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 일반 변수를 생성자처럼 호출합니다</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let b = 22;
BtnEle.addEventListener("click", () => {
try {
new b();
}
catch (err) {
resEle.innerHTML = err;
}
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 화면에 제목과 버튼이 표시됩니다.
'클릭하세요' 버튼을 누르면 다음과 같은 결과가 나타납니다.
버튼을 클릭하면 숫자 값 22를 담고 있는 변수 b를 new b() 형태로 호출하게 되는데, 숫자는 생성자가 아니기 때문에 TypeError: b is not a constructor 오류가 발생하고, 이 오류 메시지가 .result 영역에 출력됩니다.
오류를 피하는 방법
new키워드는 반드시 함수 또는 클래스와 함께 사용해야 합니다.- 화살표 함수 대신 일반 함수 선언문이나
class문법을 사용하세요. - ES 모듈을 사용할 때는 해당 클래스가 default export인지 named export인지 확인한 후 올바른 방식으로 import 하세요.
이처럼 생성자 오류는 대부분 잘못된 대상을 new로 호출하는 단순한 실수에서 비롯되므로, 오류 메시지에 표시된 변수나 함수의 타입을 먼저 확인하면 쉽게 해결할 수 있습니다.