JavaScript 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.

But what are types? According to the latest version of the JavaScript specifications, ECMAScript, there are nine data and structural types. Six of which, (sometimes seven if we count null), are primitive data types, those being string, number, bigint, boolean, undefined, and symbol. Before we can understand why TypeErrors trigger during an operation, let’s review our nine types in JavaScript. If we are ever in a position where we are unsure of how to categorize a type, we can use the typeof operator.

1. undefined: A type of value that automatically gets defined to variables that have just been declared. We often get a typeerror value of undefined when we forget to define or add a value to our variable.
2. Boolean: Logical data type containing only values of true or false. 
3. Number: Numeric data type.
4. String: Sequence of characters inside backticks, sing, or double quotes.
5. BigInt: Numeric data type sometimes known as bignums in other programming languages. 
6. Symbol: Value that represents a unique identifier created by invoking the Symbol function.
7. Object: A structural type and almost anything the ‘new’ keyword is able to create, like an array, object, map, set, etc.
8. Function: Another non-data structure that is a code snippet that may be called by other pieces of code.
9. null: Usually an intentional value representing an object or address that does not exist.

Most Common JavaScript TypeErrors and How to Fix Them

TypeErrors can be thrown at you when attempting to change a value that cannot be changed or when using a value in an inappropriate way. It can also occur when an argument is passed to a function that is incompatible with the type expected by the function or the operator inside of the function.

Changing a Value 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"

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 backwards 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))

Conclusion

It is important to be able to understand why your code is throwing a type error in order for you to understand how to debug it. If you are ever in a position where you are unsure of how to categorize a type, the typeof operator will return you one of the nine data or structural types, for a better understanding of how you should proceed with debugging.