TypeError: JavaScript

Types of TypeError

For example, you will get an Uncaught TypeError if you try to convert a number to uppercase. toUpperCase() is a string method, so calling it on a number is an incompatible operation. The following code throws an error.

Code structure

var num = 1;
try {
  num.toUpperCase();
}
catch (err) {
  document.getElementById("demo").innerHTML = err.name;
}

Error

The fastest guard is to check the type before calling the method. Use the typeof operator so the string method only runs on an actual string.

var num = 1;
if (typeof num === "string") {
  num.toUpperCase();   // only runs when num is really a string
} else {
  console.log("Not a string, skipping toUpperCase()");
}

Common JavaScript TypeError Scenarios (And How to Fix Them)

Beyond the toUpperCase example, three TypeError messages account for most real-world crashes. Here is what each means and the modern way to fix it.

1. Cannot read properties of undefined (or null)

This is the single most common TypeError. It fires when you access a property or method on a value that is undefined or null, usually because an object or array field you expected was not there.

Before

const user = { name: "Ada" };
// user.profile was never set
console.log(user.profile.city);
// Uncaught TypeError: Cannot read properties of undefined (reading 'city')

After - use optional chaining (?.) so the access short-circuits to undefined instead of throwing, and nullish coalescing (??) to supply a fallback value.

const user = { name: "Ada" };

// ?. stops the chain the moment profile is undefined
const city = user?.profile?.city ?? "Unknown";
console.log(city);   // "Unknown"

Note that ?. is what prevents the error by guarding the read; ?? only decides what value to use when the result is null or undefined.

2. x is not a function

This TypeError appears when you call something that is not a function, often a misspelled method, a property that holds a value instead of a function, or a variable reassigned to a non-function.

Before

const list = [1, 2, 3];
// pushh is a typo, it is not a function
list.pushh(4);
// Uncaught TypeError: list.pushh is not a function

After - call the correct method, and when a value might not be callable, verify it with typeof first.

const list = [1, 2, 3];
list.push(4);   // correct method name

// guard a value that may or may not be a function
if (typeof callback === "function") {
  callback();
}

3. Assignment to constant variable

Reassigning a variable declared with const throws a TypeError. A const binding cannot be reassigned after it is created.

Before

const total = 10;
total = 20;
// Uncaught TypeError: Assignment to constant variable.

After - use let when the value needs to change, and keep const for values that never do.

let total = 10;
total = 20;   // valid, let allows reassignment

TypeError vs ReferenceError: What Is the Difference

The two errors are easy to confuse because both often involve undefined, but they point to different root causes. A ReferenceError means the variable was never declared, so the name does not exist in scope. A TypeError means the variable exists but the operation you attempted is not valid for its current type.

// ReferenceError: the name was never declared
console.log(score);
// Uncaught ReferenceError: score is not defined

// TypeError: the variable exists but the operation is invalid for its type
let score = 5;
score.toUpperCase();
// Uncaught TypeError: score.toUpperCase is not a function

Defensive Coding: How to Prevent TypeErrors in JavaScript

Fixing a TypeError after it crashes is reactive. These practices stop most of them from ever running.

• Type-check with typeof: Before calling a method or invoking a value, confirm its type. typeof value === "function" and typeof value === "string" catch the two most common TypeError triggers.
• Use optional chaining and nullish coalescing: Reach into nested objects with ?. and provide safe defaults with ??, so a missing field returns a fallback instead of crashing.
• Wrap risky operations in try...catch: For code that can fail for reasons outside your control, such as JSON parsing or third-party calls, a try...catch block lets you handle the failure gracefully rather than halting execution.
• Adopt TypeScript for static safety: TypeScript catches type mismatches at compile time, before the code ever runs, eliminating a whole class of TypeErrors during development. Pair it with unit tests, as covered in this guide to JavaScript unit testing.
• Reproduce and inspect in the console: When an error does surface, the browser console shows the error name and the exact line. This walkthrough on debugging JavaScript in the browser console shows how to trace it quickly.

Note: TypeErrors often surface only on specific browsers. Test your JavaScript across real browser and OS environments with TestMu AI. Try TestMu AI Today!