Skip to main content

JavaScript Errors

JavaScript Error Types

Written by Published

JavaScript has several built-in error types, each describing a different kind of failure.

The type tells you what category of thing went wrong.

Recognising them makes debugging much faster.

Example

Example

javascript

let name;

try {
  null.length;
} catch (error) {
  name = error.name;
}

console.log(name);

The output is TypeError.

The Common Types

TypeError - a value is not the type you tried to use it as.

ReferenceError - a name that does not exist.

SyntaxError - the code could not be parsed.

RangeError - a value outside the allowed range.

Syntax

Syntax

javascript

error instanceof TypeError

All of them inherit from Error.

TypeError

The most common one by far, usually from null or undefined.

Example

Example

javascript

const results = [];

try {
  null.length;
} catch (error) {
  results.push(error.name);
}

try {
  const n = 42;
  n.toUpperCase();
} catch (error) {
  results.push(error.name);
}

console.log(results.join(" "));

Both are TypeErrors: the value was not what the code assumed.

ReferenceError

The name has never been declared anywhere.

Example

Example

javascript

let name;

try {
  neverDeclared;
} catch (error) {
  name = error.name;
}

console.log(name);

A typo in a variable name usually produces this.

RangeError

A number outside what the method allows.

Example

Example

javascript

let name;

try {
  (5).toFixed(200);
} catch (error) {
  name = error.name;
}

console.log(name);

Infinite recursion also produces a RangeError.

SyntaxError from JSON

You cannot catch a syntax error in your own code, because nothing runs.

You can catch one from JSON.parse, which parses at runtime.

Example

Example

javascript

let name;

try {
  JSON.parse("not json");
} catch (error) {
  name = error.name;
}

console.log(name);

The output is SyntaxError.

Reacting to the Type

instanceof lets you handle different failures differently.

Example

Example

javascript

function describe(fn) {
  try {
    fn();
    return "worked";
  } catch (error) {
    if (error instanceof TypeError) return "a type problem";
    if (error instanceof ReferenceError) return "a missing name";
    return "something else";
  }
}

console.log(describe(function () { null.length; }));
console.log(describe(function () { neverDeclared; }));

Handle only what you can genuinely recover from.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Error Types</title>
</head>
<body>

  <h1>Error Types</h1>

  <p id="out"></p>

  <script>
    function nameOf(fn) {
      try {
        fn();
        return "no error";
      } catch (error) {
        return error.name;
      }
    }

    document.getElementById("out").innerHTML =
      "null.length: " + nameOf(function () { null.length; }) +
      "<br>missing name: " + nameOf(function () { neverDeclared; }) +
      "<br>bad JSON: " + nameOf(function () { JSON.parse("nope"); }) +
      "<br>bad range: " + nameOf(function () { (5).toFixed(200); });
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try your own failure:

Add a function that calls a method on undefined.

Important Points

  • TypeError means a value was the wrong type.
  • ReferenceError means the name does not exist.
  • SyntaxError means the code could not be parsed.
  • RangeError means a value was out of range.
  • instanceof distinguishes them in a catch.

Conclusion

The error type is the first clue when something breaks.

TypeError on null or undefined is the one you will see most.

Handling different types differently is only worth doing when you can actually recover.