Be Better At Debugging By Understanding Your Errors In Javascript

While writing code, we encounter errors a lot of times. Generally, our first approach to resolving that error or bug is to copy-paste the entire error and search for it on google.

That does resolve the bug most of the time, but wouldn't it be more efficient if you could understand the reason behind the error just by reading it and then resolving it all by yourself in no time?

Having some basic idea about some common errors in javascript, you yourself can fix those errors without searching for solutions here and there and save yourself a bunch of time.

There are various kinds of errors in javascript like syntax errors, type errors, reference errors, range errors, etc.

In this blog, we will be discussing and comparing two of the above-mentioned errors - type errors and reference errors as they stand among the most common errors.

Type Errors

Let us first look at a type error in javascript.

const name = `Mr. Error`
console.log(name());
//Output-> Uncaught TypeError: name is not a function

Can you understand why the error occurred? Let's change our language to English and write code in it and then compare it with the code above to understand it better.

food = pizza
topping = pineapple
put topping on food -> Uncaught FlavourError: not a suitable topping

Here we can see that pineapple on pizza is not a valid topping. And the same way, in the previous example, calling a function on a variable name was not a valid operation!

The correct way to write the previous code is:

const name = `Mr. Error`;
console.log(name);
//Output-> Mr. Error

Now you may, for once, accept pineapple as a topping on your pizza but javascript will never let you perform an operation where it is not possible to perform it.

A type error is an error that occurs when you try to perform an operation over some value that is not intended for that particular operation.

Let's look at one more example of a type error.

const chocolate = `snickers`;
let chocolateBox;
chocolateBox.push(chocolate);
console.log(chocolateBox);

//Output-> Uncaught TypeError: Cannot read properties of undefined (reading 'push')

Here, the push function is being called upon an undefined variable and hence it returns a type error because a push function is meant for an array and not for an undefined variable.

The correct way to write the above code is:

const chocolate = `snickers`;
let chocolateBox = [];
chocolateBox.push(chocolate);
console.log(chocolateBox);

//Output-> ['snickers']

Here, we declared an empty array instead of an undefined variable and hence resolved the bug by understanding our error!

Let's now see what are reference errors.

Reference Errors

Let us first look at a reference error in javascript.

const name = `Mr. Error`;
console.log(age);

//Output-> Uncaught ReferenceError: age is not defined

Can you understand what happened above? Let us again write a code in English and then compare the two codes.

buy -> iPhone14
Uncaught BalanceError: you are broke!

Just like you cannot purchase an iPhone 14 without the existence of money, javascript cannot access the variable age without it being defined!

In the previous example, we were trying to console.log the variable age without defining it. The correct way to write the code would be:

const name = `Mr. Error`;
const age = 404;
console.log(age);

//Output-> 404

A reference error is an error that you will encounter while you are trying to access something or refer to something that is not defined or does not exist.

Let us look at another type of reference error.

const name = `Mr. Error`
const age = 404;
if (age===404){
    const hobby = `Does not like to be found.`;
}
console.log(hobby);

//Output-> Uncaught ReferenceError: hobby is not defined

Here, we are trying to access the variable hobby outside its scope. It is declared in the if block and is block scoped to that block. Therefore, we get a reference error as javascript cannot access a variable outside its scope.

The correct way to write the above code is:

const name = `Mr. Error`
const age = 404;
if (age===404){
    const hobby = `Does not like to be found.`;
    console.log(hobby);
}
//Output-> Does not like to be found.

Here, we accessed the variable hobby inside the if block and hence once again resolved the bug by understanding our error!

Key Difference Between Type Errors And Reference Errors

The key difference between the two errors is:

A type error is an error that occurs when you try to perform an operation on a variable that is accessible to javascript but is not valid for that particular operation.

A reference error is an error that occurs when you try to access a variable that is not accessible to javascript.

Conclusion

Now it is clear why the two errors occur and therefore we can easily spot the bug and fix it without using any google search! Understanding the errors makes us better at the process of debugging and makes our code more efficient.

There are different types of errors in javascript. Reference errors and type errors are among the most common errors. Type error is for invalid operations and reference error is for non-accessible variables.