Well, Errors are part and parcel of development. Its bound to happen no matter what precautions we take. When we are executing a JavaScript code, we may encounter variety of errors.
Why does an error occur?
There are many reasons for the occurrence of error. The most common reasons are:
- Passing erroneous input
- Typing mistake
- Coding errors
- No error handling mechanism
How does Error work in JavaScript?
The Error constructor in JavaScript will create an Error object. When runtime error occur instance of the error object will be created by the JavaScript and will be thrown by the browser.
The Error object provides us with information about the error. The error object consists of two properties:
{} name: The name of the error
{} message: Description of the error
What are the different types of error?
The name property of the error object can have 5 possible values. Henceforth, In JavaScript there are 5 types of error:
{} TypeError
{} ReferenceError
{} SyntaxError
{} RangeError
{} URIError
</> TypeError
JavaScript is a loosely typed language. Even though JavaScript employs loose typing it detects all the standard datatypes such as string, number, date, boolean, object, array through auto type inference mechanism.
TypeError occurs when we try to assign a value to a variable or a parameter of a function which is not a valid type. The TypeError occurs when we are using a wrong type for an operation like the one below:
var playerName = "Partha"; playerName.isFinite(); // TypeError: playerName.isFinite is not a function
The above code results in TypeError because playerName is of type string and we are trying to check if playerName is a finite number or not.
</> ReferenceError
This is one of the most common error in JavaScript. When we try to use or reference a variable that we forgot to declare, results in ReferenceError. In other words. ReferenceError occur when we try to use or reference a variable which has not been declared.
var playerScore = 340; var highestScore = playerScore + bonusCoins; // ReferenceError: bonusCoins is not defined
In the above code we are calculating the highestScore of the player by adding up playerScore and the bonusCoins collected. Since bonusCoins is not defined, we get ReferenceError.
</> SyntaxError
SyntaxError are pretty common during development. A SyntaxError in general is an error in the source code of the script or a program. Javascript follows a strict syntax to compile the code correctly. If any part or aspects of the code failed to conform to this syntax results in syntax error.
In short, SyntaxError is an error that occurs during the evaluation or parsing of the code.
SyntaxError can easily be identified and corrected, Thanks! to IDE’s auto code compilation(The red curved line and the red bib are the indicators for syntax error).
var playerScore = 500;
alert("Your score is "+playerScore"; //SyntaxError: missing ) after argument list
In the above code, we are showing the playerScore in an alert box. Since the closing parentheses is missing in the above. The browser throws a SyntaxError .
</> RangeError
A range error occurs when we try to pass a numeric value that is outside the range of expected or legal values to a variable of type number.
var count = -4; var playerName = "SomarLih"; playerName.repat(count); // RangeError: Invalid count value
So, In the above example we are trying to repeat the playerName count number of times. Since the repeat function accepts only numbers greater than 0(zero) we get RangeError. i.e. the value -4 is outside the expected range of the repeat function since the repeat function accepts only positive integers.
There is one more type of RangeError that is less commonly occurred known as “Maximum call stack size exceeded“. This error occurs when stack space is completely exhausted.
Array.apply(null, new Array(1000000000000)).map(Math.random); // RangeError: Maximum call stack size exceeded
What we are trying do here is, creating an array of 1,000,000,000,000 random numbers. Since the maximum number of arguments that can be passed to a function in JavaScript is 65,536. Each argument is allocated with a space in the stack. After 65,536th argument there will not be any stack space left hence JavaScript throws “Maximum call stack size exceeded”
</> URIError
There are some restrictions imposed by the JavaScript on the characters that can encoded or decoded in the URI. URIError occurs when we try to pass invalid parameters to the encodeURI() or decodeURI() functions.
var gameUri = "http://%de.game.com/data/sam/v1/ge?scoreslength=56"; decodeURI(gameURL); // URIError: URI malformed at decodeURI
Since % is an escape character, and we cannot encode or decode this escape character we get URIError.
A Note on Error Object
The error object has two standard properties: name and message which must and will be supported by all the browsers. Apart from these standard properties browsers such as Mozilla and Microsoft Edge supports properties in the Error Object that are not been standardized yet. These properties are:
- fileName: The name of the file in which the error has occurred. Firefox supports this property
- lineNumber : The line number that contains the error. Firefox supports this property
- columnNumber : The column number in a particular row or line in which the error has occurred. Firefox supports this property.
- description : The description about the error. Supported by Microsoft
- number : Numeric value of the error. Each error type is assigned a numeric value. Microsoft supports this.
Well, these are the different type of Errors in JavaScript. Once we know the type of the error, we can handle the error effectively. I will be soon writing a blog on handling errors.
BlueStocks Dev World 