Javascript errors: ReferenceError v/s TypeError

Javascript errors

A programmer has to write 1000s of lines of code and it is impossible to write 100% error-free code in one go. Even an expert developer also faces some unexpected errors and if we don't know what these errors are we'll have a hard time figuring out what went wrong. This article will help you avoid often-made errors in Javascript.

In Javascript, you will often encounter two main errors: ReferenceError and TypeError. There are more types of errors in Javascript, but for this article, we will focus on these two.

---

ReferenceErrors

In Javascript, a ReferenceError occurs when the code is trying to access a variable that has not been declared or is undefined or is out of scope.

There are three main reasons for a ReferenceError to be thrown. Let's go through each one of them with the help of some examples.

---

Types of ReferenceErrors

• Accessing a variable that hasn't been declared:

  A ReferenceError occurs when the code is trying to access a variable that has not been declared or is undefined.

  Below in the example, it will show a ReferenceError with the message "y is not defined" because variable y is being accessed which has not been declared or defined yet.

let x;
console.log(y);  //ReferenceError: y is not defined

The correct way to write the above example would be by first declaring the variable y and then accessing it. Here's, an example of it.

let x;
let y;
console.log(y);

• Accessing a variable before it is declared:

  A ReferenceError occurs when we try to access a variable before it has been defined.

  Below in the example, we are trying to access the variable z before it has been defined which is why it shows us ReferenceError with the message 'z is not defined'.

console.log(z);
const z = 10;  //ReferenceError: z is not defined

To resolve the error in the above example, we must define the variable z with a value before it is accessed. Here's, an example of it.

const z = 10;
console.log(z);

• Accessing out-of-scope variables:

  Another reason for getting a ReferenceError is the wrong scope. It occurs when we try to access a variable outside of a function that is defined inside a function. It happens so because the variable has the function's scope, i.e., it is accessible only inside the function which is why it shows an error while accessing outside.

function scope() 
{
    const x=10; 
    return x++;
} 
console.log(x);  //ReferenceError: x is not defined

To resolve this, we can declare the variable outside the function so that it has global space, i.e., it is accessible throughout the code. Here's, an example of it.

const x=10; 
function scope() 
{
    return x++;
} 
console.log(x);

---

TypeError

In Javascript, a TypeError occurs when an operation is not performable.

There are many reasons to encounter a TypeError but we will see a few of them which occur often. Let's look into them with the help of some examples.

---

Types of TypeError

• Accessing a property of undefined:

  A TypeError is thrown when we try to access a function that does not exist. Below in the example, we are trying to access bar function of obj property which does not exist since obj is undefined which is why a TypeError occurs.

let obj = {}
obj.bar()  //TypeError: obj.bar is not a function

• Calling a non-function value:

A TypeError is thrown when we call a value from a function but the value is not a function.

Below in the example, we are calling the function foo() which isn't a function, instead, it's just a variable holding a string value.

let foo = 'hello';
foo();  // TypeError: foo is not a function

---

Conclusion

In conclusion, ReferenceError and TypeError are two common errors in JavaScript that occur when accessing a variable that is not defined or when performing an operation on an incorrect data type, respectively. Understanding these errors and how to resolve them is crucial for writing robust and efficient JavaScript code.

So there you have it, my friend! ReferenceError and TypeError are like speed bumps on the road to successful JavaScript coding. But don't let them slow you down – once you know what causes them and how to avoid them, you'll be cruising along like a pro. Just make sure you have all your variables in order and double-check those data types. You've got this!