What are the Different Types of Errors in JavaScript? - 7 Types of error, 3 pieces of info, to handle try, catch finally

 

• There are 7 types of JavaScript errors: Syntax error, Reference Error, Type Error, Evaluation Error, RangeError, URI Error and Internal Error.

1. Syntax error - The error occurs when you use a predefined syntax incorrectly.

const func = () =>
console.log(hello)
}

Output:

}
^
SyntaxError: Unexpected token }

In the above example, an opening bracket is missing in the code, which invokes the Syntax error constructor.

2. Reference Error - In a case where a variable reference can't be found or hasn't been declared, then a Reference error occurs.

console.log(x);

Output:

console.log(x);
            ^
ReferenceError: x is not defined

3. Type Error - An error occurs when a value is used outside the scope of its data type.

let num = 15;
console.log(num.split("")); //converts a number to an array

Output:

console.log(num.split("")); //converts a number to an array
                ^
TypeError: num.split is not a function

4. Evaluation Error - Current JavaScript engines and EcmaScript specifications do not throw this error. However, it is still available for backward compatibility. The error is called when the eval() backward function is used, as shown in the following code block:

try{
  throw new EvalError("'Throws an error'")
}catch(error){
  console.log(error.name, error.message)
}

Output:

EvalError 'Throws an error'

5. RangeError - There is an error when a range of expected values is required, as shown below:

const checkRange = (num)=>{
  if (num < 30) throw new RangeError("Wrong number");
  return true
}

checkRange(20);

Output:

 if (num < 30) throw new RangeError("Wrong number");
                ^
RangeError: Wrong number

6. URI Error - When the wrong character(s) are used in a URI function, the error is called.

console.log(decodeURI("https://www.educative.io/shoteditor"))

console.log(decodeURI("%sdfk"));

Output:

console.log(decodeURI("%sdfk"));
            ^
URIError: URI malformed

7. Internal Error - In the JS engine, this error occurs most often when there is too much data and the stack exceeds its critical size. When there are too many recursion patterns, switch cases, etc., the JS engine gets overwhelmed.

switch(condition) {
 case 1:
 ...
 break
 case 2:
 ...
 break
 case 3:
 ...
 break
 case 4:
 ...
 break
 case 5:
 ...
 break
 case 6:
 ...
 break
 case 7:
 ...
 break
 ... up to 500 cases
 }

Output: Its output will be like InternalError.

What are Errors in JavaScript?

JavaScript code can encounter different errors when it is executed. Errors can be caused by programming mistakes, incorrect input, or other unforeseeable events.

Errors in programming can be divided into two types. These are:

1. Program Error: - In this case, the program might need to handle this error through its error handlers. An example could be network disconnection, timeout error, etc.
2. Developer Error: - The programmer has caused an error. It can be a syntax error, a logical error, a semantic error, etc.

The try...catch...finally Statement

Exception handling has been added to JavaScript in recent versions. Exceptions are handled by JavaScript's try...catch...finally construct and throw operator.
Syntax

try {
    // statements
    [break;]
    } 

catch ( e ) {
    // statements if an exception occurs
    [break;]
    }

finally {
    // statements that always execute regardless of an exception occurring
    }
   

Examples of errors in JavaScript

After the try block, there must either be a catch block or a finally block (or both). The catch block is executed if an exception occurs in the try block. After try/catch, finally is executed unconditionally. Let's see an example:

function myFunc() {
    var num = 50;
     try {
            alert("Value of variable a is : " + num );
        }
    catch ( error ) {
        alert("Error: " + error.description );
        }
    finally {
        alert("Finally, block will always execute!" );
        }
}
myFunc()

Output: The below statements will be shown in an alert box.

Value of variable a is : 50
Finally, block will always execute!

The throw statement can be used to raise built-in exceptions or your customized ones.

function myFunc() {
    
    var num1 = 100;
    var num2 = 0;
               
    try {
        if ( num2 == 0 ) {
            throw( "Divide by zero error." ); 
        } else {
            var num3 = num1 / num2;
        }
    }
    catch ( e ) {
        alert("Error: " + e );
    }
}
myFunc()

Output: The below statement will be shown in an alert box.

Error: Divide by zero error.

The onerror() Method

In JavaScript, error handling was simplified by the onerror event handler. If there is an exception on the page, the error event will be fired on the window object.

window.onerror = function () {
    alert("An error occurred.");
}

There are three pieces of information provided by the onerror event handler that identifies the error's exact nature.

Error message − A message similar to the one displayed by the browser when an error occurs. URL − The file where the error occurred.

Line number− This is the line number in the URL where the error occurred.

Conclusion

• An error is a statement that interferes with the proper operation of the program.
• There are 7 types of JavaScript errors: Syntax error, Reference Error, Type Error, Evaluation Error, RangeError, URI Error and Internal Error.
• Errors in Javascript can be handled using the try...catch...finally construct as well as the throw operator.
• The article allows you to easily identify the source of an error, whether it occurs in your terminal or browser.

REf: https://www.scaler.com/topics/types-of-errors-in-javascript/