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
What are the three types of errors I can expect in my JavaScript script?
In this tutorial, let us discuss the three types of errors we can expect in our JavaScript code.
Errors are statements that block the execution of the program. During the compilation and execution of JavaScript programs, three types of errors can occur: syntax errors, runtime errors, and logical errors.
Syntax Errors
Syntax errors are the most common errors that occur when the JavaScript engine cannot understand the code due to incorrect syntax. These errors happen during the parsing phase before code execution begins.
For example, using a semicolon instead of a colon in an object declaration causes a syntax error. When syntax errors occur, the entire script stops executing at that point.
JavaScript follows three steps before running code: tokenization (breaking code into keywords, operators, literals), parsing (creating an Abstract Syntax Tree), and compilation. Syntax errors prevent the code from reaching the execution phase.
Example of Syntax Error
Here's an example showing a syntax error caused by using a semicolon instead of a colon in an object:
<html>
<head>
<script type="text/javascript">
window.onerror = function(e) {
document.getElementById("syntErrOp").innerHTML = e;
};
</script>
<script type="text/javascript">
function getSyntErr() {
var syntErrBtnWrap = document.getElementById("syntErrBtnWrap");
var syntErrOp = document.getElementById("syntErrOp");
let jsonObj = {
name; 'Egan' // syntax error: semicolon instead of colon
}
}
</script>
</head>
<body>
<div id="syntErrBtnWrap">
<p>Click the button to see the syntax error:</p>
<button onclick="getSyntErr()">Click Me</button>
</div>
<div id="syntErrOp"></div>
</body>
</html>
Runtime Errors
Runtime errors occur after the code has been successfully parsed but fail during execution. These are also called exceptions. Common examples include calling undeclared functions, accessing null properties, or dividing by zero.
Unlike syntax errors, runtime errors can be handled using try-catch blocks. Type errors and range errors are common runtime error categories.
Example of Runtime Error
This example demonstrates a runtime error by calling an undeclared function:
<html>
<head>
<script type="text/javascript">
window.onerror = function(e) {
document.getElementById("runTimeErrOp").innerHTML = e;
};
</script>
<script type="text/javascript">
function getRunTimeErr() {
var runTimeErrBtnWrap = document.getElementById("runTimeErrBtnWrap");
var runTimeErrOp = document.getElementById("runTimeErrOp");
callUndeclaredFunction(); // runtime error: function not defined
}
</script>
</head>
<body>
<h2>Runtime error in JavaScript</h2>
<div id="runTimeErrBtnWrap">
<p>Click the button to see the runtime error:</p>
<button onclick="getRunTimeErr()">Click Me</button>
</div>
<div id="runTimeErrOp"></div>
</body>
</html>
Logical Errors
Logical errors are the most challenging to detect because the code runs without throwing exceptions, but produces incorrect results. These errors stem from flawed program logic or incorrect algorithms.
Examples include using the wrong operator in calculations, incorrect loop conditions, or flawed conditional statements. Developers need careful code review and testing to identify logical errors.
Example of Logical Error
This example shows a logical error where we subtract instead of add two numbers, but display it as addition:
<html>
<head>
<script type="text/javascript">
function getLogicErr() {
var logicErrBtnWrap = document.getElementById("logicErrBtnWrap");
var logicErrOp = document.getElementById("logicErrOp");
var num1 = 10, num2 = 5, sum;
sum = num1 - num2; // logical error: subtracting instead of adding
logicErrOp.innerHTML = num1 + " + " + num2 + " = " + sum;
}
</script>
</head>
<body>
<h2>Logical error in JavaScript</h2>
<div id="logicErrBtnWrap">
<p>Click the button to see the logical error:</p>
<button onclick="getLogicErr()">Click Me</button>
</div>
<div id="logicErrOp"></div>
</body>
</html>
10 + 5 = 5
Error Comparison
| Error Type | When Occurs | Detection | Handling |
|---|---|---|---|
| Syntax Error | Parse time | Automatic by engine | Fix syntax before execution |
| Runtime Error | Execution time | Thrown as exceptions | try-catch blocks |
| Logical Error | Execution time | Manual testing | Code review and debugging |
Conclusion
Understanding these three error types helps developers write more robust JavaScript code. Syntax errors prevent execution, runtime errors can be caught and handled, while logical errors require careful testing and debugging to identify.
583 Views
