What are the three types of errors I can expect in my JavaScript script?

Javascript Web Development Front End Technology

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 of the program, three types of errors can occur. These are syntax errors, run time errors, and logical errors.

Syntax Errors

Syntax errors are usual errors. Incorrect syntax causes parsing issues during the code interpretation. For example, add a semicolon instead of a colon in an object declaration. Syntax errors affect only the respective code thread. The remaining code works as it is.

A grammatical mistake is the ultimate cause of syntax errors. An incorrect JSON object parse is a syntax error that occurs during runtime from an ajax response.

Syntax errors occur when the JavaScript engine is unable to understand our code. There are three steps before running a code.

At first, code tokenization takes place by breaking the code into small units. The tokenization stage categorizes the numbers, keywords, literals, and operators.

The next stage is parsing. Here it generates the AST or the abstract representation of the code structure.

When syntax errors occur, the code will not change to the machine code.

We can trace the syntax errors fast because the compiler traces the error with the line number.

let jsonObj =
{
   name; 'Egan' //semicolon is the syntax error here
}

Example

In this example, we make the semicolon misplace error. We get the error trace in the console with the line number. Because we have an onerror handler, we see an unexpected error of the "function undeclared". This error is due to the syntax error.


<html>
<head>
   <script type = "text/javascript">
      window.onerror = function(e) {
         syntErrOp.innerHTML = e;
      };
   </script>
   <script type="text/javascript">
      function getSyntErr()
      {
         var syntErrBtnWrap = document.getElementById("syntErrBtnWrap");
         var syntErrOp = document.getElementById("syntErrOp");
         let jsonObj =
         {
            name; 'Egan'
         }
      }
   </script>
</head>
<body>
   <div id="syntErrBtnWrap">
      <p>Click the button to see the error</p>
      <button onclick="getSyntErr()">Click Me</button>
   </div>
   <div id="syntErrOp"></div>
</body>
</html>

Runtime Errors

Runtime errors occur after compiler interpretation. Another name for runtime errors is an exception. For example, calling an undeclared function. Runtime errors block the program execution. We can use a try-catch block to handle these exceptions. Type errors and range errors come under runtime errors.

Division by zero and access to unavailable memory are examples of runtime errors

callUndefined();
//no function declaration

Example

In this example, we make the "function undeclared" error. We get the error trace in the console with the line number. Because we have an onerror handler, we see the same error of the "function undeclared".


<html>
<head>
   <script type = "text/javascript">
      window.onerror = function(e) {
         runTimeErrOp.innerHTML = e;
      };
   </script>
   <script type = "text/javascript">
      function getRunTimeErr()
      {
         var runTimeErrBtnWrap = document.getElementById("runTimeErrBtnWrap");
         var runTimeErrOp = document.getElementById("runTimeErrOp");
         callUndeclare();
      }
   </script>
</head>
<body>
   <h2>Runtime error in JavaScript</i></h2>
   <div id="runTimeErrBtnWrap">
      <p>Click the button to see the error</p>
      <button onclick="getRunTimeErr()">Click Me</button>
   </div>
   <div id = "runTimeErrOp"> </div>
</body>
</html>

Logical Errors

A developer needs to use intelligence and reasoning skills to trace logical errors. These occur in the code flow. For example, say x is greater than y. But we get the output as y is greater than x. So it is a mistake in the code logic.

The use of an infinite loop is an example of a logical error. When a developer gets confusion with variable usage, logical errors arise. The developer must be careful with the program's algorithm to avoid logical errors.

Example

In this example, we subtract two numbers instead of adding them and display the subtraction result as the sum of the numbers. The subtraction instead of the addition of two numbers is absolutely a logical mistake by the developer.


<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;
         logicErrOp.innerHTML = num1 + " + " + num2 + " = " + sum;
      }
   </script>
</head>
<body>
   <h2>Logical error in JavaScript</i></h2>
   <div id = "logicErrBtnWrap">
      <p>Click the button to see the error</p>
      <button onclick = "getlogicErr()">Click Me</button>
   </div>
   <div id = "logicErrOp"> </div>
</body>
</html>

In this tutorial, we discovered the three types of errors in JavaScript. In short, we can prevent all sorts of errors by following good coding practices. Of course, there are exceptional cases. Here we can not avoid getting errors. In such cases, we can assume the chance of the errors and use error handlers to trace them.