Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Explain 'Not a constructor function' error in JavaScript?
The "Not a constructor function" error occurs when we try to use the new keyword with a value that isn't a constructor function. This TypeError is thrown when JavaScript expects a constructor but receives a primitive value, object, or non-constructor function.
What Causes This Error
The error occurs when we attempt to instantiate something that cannot be used as a constructor:
- Primitive values (numbers, strings, booleans)
- Regular objects
- Arrow functions (in strict mode)
- Built-in methods that aren't constructors
Example: Using Primitive as Constructor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Constructor Error Demo</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
margin: 10px 0;
}
button {
padding: 10px 15px;
margin: 5px;
font-size: 14px;
}
</style>
</head>
<body>
<button onclick="testPrimitive()">Test Primitive</button>
<button onclick="testObject()">Test Object</button>
<button onclick="testArrowFunction()">Test Arrow Function</button>
<script>
let result = document.getElementById("result");
function testPrimitive() {
try {
let number = 42;
new number(); // This will throw error
} catch (err) {
result.innerHTML = "Primitive Error: " + err.message;
}
}
function testObject() {
try {
let obj = {name: "test"};
new obj(); // This will throw error
} catch (err) {
result.innerHTML = "Object Error: " + err.message;
}
}
function testArrowFunction() {
try {
let arrow = () => {};
new arrow(); // This will throw error
} catch (err) {
result.innerHTML = "Arrow Function Error: " + err.message;
}
}
</script>
</body>
</html>
Common Scenarios and Solutions
<!DOCTYPE html>
<html>
<head>
<title>Constructor Solutions</title>
</head>
<body>
<script>
let output = document.getElementById("output");
// ? Wrong: Using primitive
try {
let str = "Hello";
new str();
} catch (err) {
output.innerHTML += "Error with primitive: " + err.message + "<br>";
}
// ? Correct: Using constructor function
function Person(name) {
this.name = name;
}
let person = new Person("John");
output.innerHTML += "Created person: " + person.name + "<br>";
// ? Wrong: Using regular object
try {
let config = {theme: "dark"};
new config();
} catch (err) {
output.innerHTML += "Error with object: " + err.message + "<br>";
}
// ? Correct: Using class
class Car {
constructor(brand) {
this.brand = brand;
}
}
let car = new Car("Toyota");
output.innerHTML += "Created car: " + car.brand;
</script>
</body>
</html>
How to Fix This Error
| Problem | Solution | Example |
|---|---|---|
Using primitive with new
|
Use constructor function or class |
new String("text") instead of new "text"
|
Using object with new
|
Create constructor function | function MyObj() {} |
| Using arrow function | Use regular function or class | function MyFunc() {} |
Prevention Tips
<!DOCTYPE html>
<html>
<body>
<script>
// Check if something is a constructor before using new
function isConstructor(obj) {
try {
new obj();
return true;
} catch (err) {
return false;
}
}
// Test different values
console.log(isConstructor(Array)); // true
console.log(isConstructor(42)); // false
console.log(isConstructor({})); // false
console.log(isConstructor(() => {})); // false
</script>
</body>
</html>
Conclusion
The "Not a constructor function" error occurs when using new with non-constructor values. Always ensure you're using constructor functions, classes, or built-in constructors like Array, Object, or Date with the new keyword.
Updated on: 2026-03-15T23:18:59+05:30
397 Views
Advertisements