Skip to main content
X

Explore your training options in 10 minutes

JavaScript Tutorials

JavaScript TypeError

Kelly M. - December 03, 2020


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Kelly M.

About the author: Kelly is a technical writer at Career Karma, where she writes tutorials on a variety of topics. She attended the University of Central Florida, earning a BS in Business Administration. Shortly after, she attended Lambda School, specializing in full stack web development and computer science. Before joining Career Karma in September 2020, Kelly worked as a Developer Advocate at Dwolla and as a team lead at Lambda School. Her technical writing can be found on Codecademy, gitConnected, and JavaScript in Plain English.

Skip to main content