Difference between ReferenceError and TypeError

Table of Content

1. What is a referenceError?

2. Types of referenceErrors.

3. What is a typeError?

4. difference between reference error and typeError.

---

• What is a ReferenceError?

in javaScript the referenceError object represents an error when a variable that doesn't exist (or hasn't yet been initialized) in the current scope is referenced.

According to javaScript web docs,there are 6 different types of reference errors. This article covers 3 most commonly occuring reference errors in javaScript.

Types of ReferenceErrors

• Undefined variables

  If the variable is referenced without defining then this error will show up.

    let firstName="niyati"
    let age=45
    console.log(lastName)
  
    //uncaught reference error:lastName not defined
  

  This can simply be fixed by defining the lastName variable

    let firstName = "Niyati"
    let lastName = "Nehal"
    let age = 45
  
    console.log(lastName)
    // returns Nehal
  

• Scope.

  This error occurs when the variable defined inside a funcion's scope is accessed outside of it.

  ```javascript function nums() { numA = 1 numB = 2

  return numA + numB }

  console.log(numA);

// Uncaught ReferenceError: numA is not defined.

    We can fix this by defining our variables in the global scope.

    ```javascript
    numA = 1
    numB = 2

    function nums() { 
      return numA + numB
    }

    console.log(nums()); 

    // returns 3

• Redeclarations

  If not well-versed with the concept of redeclaration, a developer can also trigger reference errors.

    function redeclarations() {
        let declare = 1;
        if (true) {
          let declare = (declare + 1);   
        }
      }
      console.log(redeclarations())
    // Uncaught ReferenceError: Cannot access 'declare' before initialization
  

  To fix the above code we must either change "let" to "var " or omit "let" inside our "if" statement completely

    function redeclarations() {
        let declare = 1;
        if (true) {
        declare = (declare + 1); 
  
        }
      }
      console.log(redeclarations())
  

---

• What is TypeError?

  In JavaScript, a TypeError is an object that represents an error as a result of doing an operation that cannot be performed, usually because a value in an operation is not of the expected type.

• Types of TypeErrors

1. Changing values that cannot be changed

   When you use the const keyword to assign a value to something, this means it is constant, it will not change. Attempting to change the value of a constant variable will result in a TypeError.

    const a = 5
    a = "5"
    // Uncaught TypeError: Assignment to constant variable.
   

   We can fix this by simply changing the name of the identifier we want to identify the string of “5”.

    const a = 5
    const b = "5"
   

2. Using a Value in an Inappropriate Way

   Developers must also make sure values are being used as intended. In the example below, “Cat” and “garfield” are backward when trying to verify if garfield is an instance of the Cat() function.

    function Cat() {}
    function Dog() {}
   
    let garfield = new Cat()
   
    Cat instanceof garfield
   
    // Uncaught TypeError: Right-hand side of 'instanceof' is not callable
   

   We can fix this by correcting the order of the two.

    function Cat() {}
    function Dog() {}
   
    let garfield = new Cat()
   
    garfield instanceof Cat
   

An Argument That is Incompatible with the Type Expected by a Function

When coding an operation, developers have to make sure they are using values in ways in which they are able to obtain a desired result. The value of null can be used intentionally to signify the absence of an object, but the way in which it is used below will result in a TypeError as it is being used in as an argument that is incompatible with the type expected by the function.

 function readingErrorsAreImportant(a){
    if(a.length === 5){
      return "equals five"
    } else if(a.length > 5) {
      return "Greater than five"
    }  else {
      return "Less than five"
    }
   }
   console.log(readingErrorsAreImportant(null))

   // Uncaught TypeError: Cannot read property 'length' of null

We can fix this by passing in a value type it is expecting. Like a numeric value type.

function readingErrorsAreImportant(a){
    if(a.length === 5){
      return "equals five"
    } else if(a.length > 5) {
      return "Greater than five"
    }  else {
      return "Less than five"
    }
   }
   console.log(readingErrorsAreImportant(10))

---

Difference between TypeError and ReferenceError

Without that variable declaration, JS has no idea what to do when it comes across a because there is no reference, so it throws an error | A TypeError is not too far off from a ReferenceError. The JS compiler is telling you that however you are attempting to use your variable is not how it is intended. | | var a = "I'm a string"; console.log(a) // I'm a string console.log(b) // Uncaught ReferenceError: b is not defined.

In the above example, JS knows what to do when it comes across a. It hasn't the slightest idea what to do when it comes across b so it throws a ReferenceError. | var a = "I am a string"; console.log(a) // I am a string console.log(a()) // Uncaught TypeError: a is not a function

The error message is clean and tells you exactly what is wrong in this very simple example. You are trying to invoke a as though it is a function, but yet, it is a lowly string. |

---

Conclusion

In short, a ReferenceError is just saying that the variable you are using has no reference. A TypeError is telling you that you are not using the variable's type correctly. It's incredibly simple if you think about it.