Common JavaScript Errors and What They Actually Mean

Janelle Wong
Dec 11, 2017 · 5 min read

Programming is often compared to magic, but sadly, there is no magic in programming languages. We tell the computer what to do through languages that are deterministic. For every result there is a reason, and for every error there is a logical cause. Making, encountering, and working with errors are just part of the game.

I often see developers immediately googling the error message whilst scanning their code without trying to understand what the error means. Wrong approach. The fastest way to solve a problem is predicting then comprehending what the error that the interpreter is returning. I have compiled a few ubiquitous JavaScript errors and fleshed out what they actually mean.


(This is not an error, but we often see this and treat it like an error, so it’s helpful to know what it means)

There are 6 primitive types in JavaScript, and undefined is a value with its own type Undefined. ECMAScript specifies that:

Undefined value primitive value is used when a variable has not been assigned a value. Undefined type is a type whose sole value is the undefined value.

The standard states that you will encounter an undefined value when accessing uninitialised/unassigned variables and non-existing object properties, elements and alike, or the reference to a variable or object is made outside the current scope of execution.

A variable declaration that has not been assigned to any value (uninitialised) assumes the undefined value. A function without a return statement, or with an empty return statement also returns undefined. For instance:

The existence of undefined is a result of JavaScript’s permissive nature.


The ReferenceError object inherits from the Error object. A ReferenceError is thrown when an invalid reference value has been detected. When you encounter a ReferenceError: ‘x’ is not defined, the interpreter is complaining about a non-existent variable referenced in your code, or it’s referencing a variable not within its scope, or when JavaScript attempts to get the value of an uresolvable reference.

myArray ”variable isn’t defined anywhere, and we need to make sure that the datatype will either be a string or array.

Another important concept to understand, is that scope plays a big role in encountering ReferenceErrors. Scope determines the accessibility of variables. A variable needs to be available in the current context of execution, in order to be referenced. Every JavaScript function creates a new scope, thus variables defined inside of a function cannot be accessed from outside of that function, as the variable is defined from within the function.

What’s an “unresolvable reference”?

According to ECMA standards, a Reference type consists of three components — base value, reference name, and strict flag. (Read more about this here) When a Reference is created, its components are set to some values.

For variable-based References, the base value is the variable object — an object related with an execution context that stores and declares in the context: variables and functions. The base value is the variable object of the current execution context, and each functional context has its own abstract variable object. Therefore, a Reference is unresolvable if its base value is undefined.

When an Identifier — “batcan’t be found anywhere in the scope chain, a Reference will be returned with the base value set to undefined, thus throwing a ReferenceError.

line 4 should return a ReferenceError, but it throws a TypeError instead, because the base value is subject to CheckObjectCoercible. It throws a TypeError when trying to convert undefined to an Object. The Reference will never evaluate as unresolvable, as long as the var keyword ensures that a variable object is assigned to the base value.


A TypeError is returned when an argument operand is passed into a function and evaluates a value that is not the expected type. Using the wrong data type for a certain operations/methods will result in a TypeError.

As seen above, the declaration of variable “c” will by default evaluate to undefined , which itself is its own datatype that cannot be invoked like a function call. Undefined cannot be converted into a function by invocation, therefore will result in a TypeError.

Unlike C# or Java, JavaScript is a loosely typed language, which means that variables can be initialised without explicitly stating the type of value assigned to it. Working with a loosely typed language that is able to type-convert makes it important for programmers to keep track of the actual type of values that they are working with.

The .toUpperCase method is part of the String.prototype, and therefore cannot be used on a Number. You cannot call the string value of “num”.


The SyntaxError object indicates that the JavaScript engine encountered an error(s) when interpreting and parsing through code. The error is thrown when code does not conform to the syntax of the language. This type of error is one of the most ubiquitous errors that we run into, so code cautiously.


Errors are useful when you know what they mean. Understanding what type of error the interpreter is logging out will save you time when debugging through your code. With that said, error handling is a skill that is very important to know. A lot of programmers are not quite sure how to handle errors in the most productive way, which leads to haphazard error handling. While there are many more common errors that we run to on a daily basis, I’m curious as to know what your thoughts on the importance of error handling are?

I’ve shared some resources below that are worth checking out:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade