The custom errors in JavaScript are errors that you create yourself, as opposed to the built-in errors that JavaScript throws. You can create custom errors to handle specific types of errors that may occur in your code.
To create a custom error, you can use the Error constructor. The Error constructor takes a string as its argument, which will be the message of the error.
Extending the Error Class: Creating Custom Errors
The best way to create custom errors is by creating a new class and extending it using the ‘extends’ keyword. It uses the concept of inheritance, and the custom error class inherits the properties of the Error class.
In the constructor() function, you can initialize the properties of the custom error class.
Syntax
You can follow the syntax below to create custom errors by extending the Error class.
classcustomErrorextendsError{constructor(message){super(message)// Initialize properties}}
In the above code, we call the parent class constructor using the super() method.
You can also initialize the properties of the customError class in the constructor function.
Example
In the code below, we take the input from the user. When a user clicks the check age button, it calls the checkAge() function.
We have defined the ageError class in JavaScript code and extended it with the Error class. In the ageError class, we have added the constructor() function to initialize the properties.
In the constructor() function, we used the super() method to initialize the message property of the Error class. Also, we have initialized the ‘name’ and ‘age’ properties in the constructor function.
In the checkAge() function, we throw the error if the age is less than 18, and in the catch{} block, we print the error message and age.
<html><body><p>Enter your age:<input type ="number" id ="age"/></p><button onclick ="checkAge()"> Check Age </button><p id ="demo"></p><script>const output = document.getElementById("demo");classageErrorextendsError{constructor(message, age){super(message);this.name ="ageError";this.age = age // Custom property}}functioncheckAge(){const ageValue = document.getElementById('age').value;try{if(ageValue <18){// Throw error when age is less than 18thrownewageError("You are too young", ageValue);}else{
output.innerHTML ="You are old enough";}}catch(e){
output.innerHTML ="Error: "+ e.message +". <br>";
output.innerHTML +="Age: "+ e.age +"<br>";}}</script></body></html></pre>
Output
Enter your age: 5
Check Age
Error: You are too young.
Age: 5
If you want to create multiple new classes for the custom errors only to provide the clarified error type and message and don't want to change the properties of the Error class, you can use the syntax below.
classInputErrorextendsError{};
Let's learn it via the example below.
Example
In the code below, we have created 3 different custom classes and extended them with the Error class to create custom errors.
In the try{} block, we throw the StringError.
In the catch{} block, we used the instanceOf operator to check the type of the error object and print the error message accordingly.
<html><body><div id ="demo"></div><script>const output = document.getElementById("demo");classStringErrorextendsError{};classNumberErrorextendsError{};classBooleanErrorextendsError{};try{thrownewStringError("This is a string error");}catch(e){if(e instanceofStringError){
output.innerHTML ="String Error";}elseif(e instanceofNumberError){
output.innerHTML ="Number Error";}elseif(e instanceofBooleanError){
output.innerHTML ="Boolean Error";}else{
output.innerHTML ="Unknown Error";}}</script></body></html></pre>
Output
String Error
Multilevel Inheritance
You can create a general custom error by extending it with the Error class. After that, you can extend the custom error class to create a more generalized error class.
Let's understand it via the example below.
Example
In the code below, we have defined the 'NotFound' class and extended it using the Error class.
After that, we defined the 'propertyNotFound' and 'valueNotFound' classes and extended them with the 'NotFound' class. Here, we have done the multilevel inheritance.
In the try block, we throw a valueNotFound error if the array doesn't contain 6.
In the catch block, we print the error.
<html><body><div id ="output"></div><script>const output = document.getElementById("output");classNotFoundextendsError{constructor(message){super(message);this.name ="NotFound";}}// Further InheritanceclasspropertyNotFoundextendsNotFound{constructor(message){super(message);this.name ="propertyNotFound";}}// Further InheritanceclassElementNotFoundextendsNotFound{constructor(message){super(message);this.name ="ElementNotFound";}}try{let arr =[1,2,3,4,5];// Throw an error if array doesn't contain 6if(!arr.includes(6)){thrownewpropertyNotFound("Array doesn't contain 6");}}catch(e){
output.innerHTML = e.name +": "+ e.message;}</script></body></html></pre>
Output
propertyNotFound: Array doesn't contain 6
You can also throw the propertyNotFound error if any object doesn't contain the particular property.
