Difference TypeError and ReferenceError

Consider the following code:

function foo(){
 var d=1234;
 console.log(d.substring(1,2));     
}
foo();

This will have following output:

Exception: TypeError: d.substring is not a function This is because we have used the wrong type (number) for a given operation(substring which expects a string).The TypeError object represents an error when a value is not of the expected type.

function foo(){
 var d=1234;
 console.log(c);
}
foo();

This will have following output:

Exception: ReferenceError: c is not defined This is because the reference for the variable 'c' does not exist in either local or global scope and we are still trying to use it.A ReferenceError exception is thrown when a non-existent variable is accessed.

A ReferenceError occurs when you try to use a variable that doesn't exist at all.

A TypeError occurs when the variable exists, but the operation you're trying to perform is not appropriate for the type of value it contains. In the case where the detailed message says "is not defined", this can occur if you have a variable whose value is the special undefined value, and you try to access a property of it.

See http://javascriptweblog.wordpress.com/2010/08/16/understanding-undefined-and-preventing-referenceerrors/ for some discussion related to this.

Here are the JavaScript error types:

The JavaScript 1.5 specification defines six primary error types, as follows:

EvalError: Raised when the eval() functions is used in an incorrect manner.

RangeError: Raised when a numeric variable exceeds its allowed range.

ReferenceError: Raised when an invalid reference is used.

SyntaxError: Raised when a syntax error occurs while parsing JavaScript code.

TypeError: Raised when the type of a variable is not as expected.

strong text URIError: Raised when the encodeURI() or decodeURI() functions are used in an incorrect manner.

Reference error is a scope resolution failure error. In a TypeError, scope resolution is successful, but we try to perform an illegal action on the variable that is not permitted.

The following example will give a clear idea about these two types of errors.

function foo(a){
    console.log(a+b);//ReferenceError b is not defined
    b=a;
}
foo(2);

Executing the above function results in a TypeError because, b is not defined at the point when the compiler reaches the console.log(a+b) statement, Notice the b is not declared with a var keyword.

Now consider the function below,

function foo(a){
    console.log(a+b);
    var b=a;
}
foo(2);//NaN

When the above function is executed, the compiler hoists the variable b, in the function scope, the function looks something like this after compilation

function foo(a){
    var b;//--> b has a value of undefined at this point
    console.log(a+b);
    b=a;
}
foo(2);//NaN

when the engine executes the console.log(a+b), at this point a has a value of 2 and b has a value of undefined hence its logs NaN. As the expression below evaluates to NaN

2 + undefined;// evaluates to NaN

Now coming to TypeError, Consider the following block of code, as usual we will take the function foo.

function foo(a){
console.log(a+b.toString()); //TypeError Cannot read property 'toString' of undefined
var b = a;
}
foo(2);

Going with the above logic, the compiler turns the function into something like the code below, after the variable b gets hoisted

function foo(a){
var b ;// b has a value of undefined at this point
console.log(a+b.toString()); //TypeError is thrown
b= a;
}
foo(2);

Within the scope of the function, variable b gets hoisted, and hence has a value of undefined before the line console.log(a+b.toString()). In this line we try to convert b which is undefined at this point to string, doing so, we try to do an illegal operation, hence TypeError is thrown. Scope lookup was successful for variable b, but we performed an illegal operation. Hence TypeError was thrown.