Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to catch syntax errors in JavaScript?
In this tutorial, we will learn how to catch syntax errors in JavaScript.
In JavaScript, we get will errors if we write any mistakes in code. Like, ReferenceError, i.e., when we call a variable that does not exist in our code.
TypeError i.e. when we tried to change the value which is immutable or try to use a variable in an appropriate way.
SyntaxError i.e. when we tried to interpret invalid code. We will learn more about this error in detail below.
What is Syntax Error?
A syntax error is thrown when there is a glitch in our code. This error occurs when trying to interpret code that is not semantically valid. If we create an invalid code that is not interpreted by the compiler.
Causes of Syntax Error
It is caused by the incorrect pre-defined syntax in our code. For example,
While missing opening or closing parentheses or brackets or braces.
While misspelling keywords like variable names or functions.
These errors are detected while parsing or interpreting the code. These errors will be shown in browser development tools like chrome Devtools like the console. JS error stack tree will help us to find errors in which line of code is wrong with the description of the error.
Example
Let's have a look at an example
<!DOCTYPE html>
<html>
<body>
<h1>Displaying syntaxError</h1>
<p id="result">
</p>
<script>
var message = "Hello world!";
document.getElementById("result).innerHTML = message;
</script>
</body>
</html>
Here, we can see we missed closing the double quotation at "result. This caused a SyntaxError. "Uncaught SyntaxError: Invalid or unexpected token" will be displayed in the browser development tools like the console.
Handling SyntaxError
SyntaxError cannot be handled in js using try-catch blocks because they are thrown errors while the code is being parsed. To handle SyntaxError, we can use window.onerror() function.
When there is an uncaught exception or compilation error in our code, window.onerror() will be called with some methodological information about the error and making for a more mighty opportunity for error handling.
When to use window.onerror()
Usually, when we get any error in our code we will check in the browser console what errors are being thrown. This can become troublesome for developers when developing complex web applications that contain a lot of JS code. To deal with this issue in a practical way, window.onerror will allow us to report/check errors in a convenient way.
The arguments accepted by this function are
message - Error message i.e. DOMString
url - URL of an error containing file i.e DOMString
linenumber - Line number of error occurred i.e. long
To work with this function, we need to define onerror function in a separate tag instead of where the error occurs.
Example
Let's see an example
<!DOCTYPE html>
<html>
<body>
<h2>Displying syntaxError using onerror()</h2>
<p id="result">
</p>
<script>
window.onerror = function(message, url, linenumber) {
document.getElementById('result').innerHTML = 'Error - ' + message + 'on line ' + linenumber + ' for ' + url;
}
</script>
<script>
var message = "Hello World!;
</script>
</body>
</html>
Here, I have removed the URL in the output. In line number 13, we missed closing double quotes. We can use this function with an error message argument also. Like,
Example
<!DOCTYPE html>
<html>
<body>
<h2>Displaying syntaxError using onerror()</h2>
<p id="result"></p>
<script>
window.onerror = function(e) {
document.getElementById('result').innerHTML = "Error is - " + e;
};
</script>
<script>
var message = "Hello World!;
</script>
</body>
</html>
Note that the onerror() function should be written in a separate script tag. Here, without using a console we can notice why coding is failing. This helps convey to the programmer that there is a syntax error in our code that should be fixed. This error will be minimized by checking if all the expressions in our code are semantically correct or not.
Hope this tutorial gives knowledge on SyntaxError and how to handle SyntaxError.
1K+ Views
To Continue Learning Please Login