Type Error Vs Reference Error in JavaScript

While coding in any computer language, errors are unavoidable. So far, every programmer has had to deal with problems and learn how to troubleshoot them.

Seven different types of errors can be made when developing with JavaScript. These seven errors include:

1. Syntax Error

2. Reference Error

3. Type Error

4. Evaluation Error

5. Range Error

6. URI Error

7. Internal Error

In this blog, we are going to talk about only two variants, the Type Error and the Reference Error.

Reference Error

When we define or create a variable in JavaScript, we are only generating a reference with a corresponding value.

When referencing a variable that hasn't been initialized or doesn't even exist, we run into the Reference Error.

Let us take an example,

console.log(a)
const a = 12;
// Uncaught ReferenceError: a is not defined

Because we are referencing the variable a even before it is defined in this code, a Reference Error occurs.

Reference errors can occur when a variable is attempted to be referenced before it has been defined, when the variable name is misspelled during reference, or when a variable is attempted to be accessed from a scope where it does not exist.

const myGreeting = "Hello";
console.log(mygreeting);
// Uncaught ReferenceError: myname is not defined

Here, we have used camelCase while defining the variable, but due to misspelling, while referencing, we just wrote it like mygreeting and hence we got the Reference Error.

function x() {
    {let a = 10;}
    console.log(a)
}
x();
// Uncaught ReferenceError: a is not defined

In this example, a is defined in a block scope inside a function, and we are trying to access it in a functional scope, which cannot happen as the console will not be able to find the reference of the variable passed to it in its scope. So, this code throws a Reference Error.

Type Error

We can get a Type Error when the type of variable we are trying to access is not as expected or the way of accessing it is inappropriate.

This error can occur in the following cases.

const welcome = 'Hello';
welcome = 'Hyy';
// Uncaught TypeError: Assignment to constant variable.

We are trying to change the value of the welcome variable, which is inappropriate given that it is defined with a const and is a constant variable, and as a result, a Type Error has happened.

const number = 10;
console.log(number());
// Uncaught TypeError: number is not a function

In the above example, the number is a variable but we are trying to access it by calling it as a function, which is not the correct way to access a variable. So, we got a Type Error.

Conclusion

After reading about Type Errors and Reference Errors, we can now understand the fundamental distinction between the two. Use of a variable that doesn't exist at all results in a ReferenceError. When a variable is present but the operation you are trying to carry out is inappropriate for the kind of value it contains, a TypeError is raised.