JavaScript Error Handling

JavaScript Error Handling – X Is Not a Function TypeError

Making our way through our JavaScript Error Handling series, today we’ll tackle the fun little error known as the X Is Not a Function TypeError. As indicated by the name itself, the X Is Not a Function TypeError is most often thrown when attempting to invoke a function() call on a value or object that doesn’t actually represent a function itself.

In this article we’ll explore the X Is Not a Function TypeError in greater detail, including where it sits in the JavaScript Exception hierarchy, as well as a few simple code examples that illustrate how X Is Not a Function TypeErrors may occur. Let’s get crackin’!

The Technical Rundown

  • All JavaScript error objects are descendants of the Error object, or an inherited object therein.
  • The TypeError object is inherited from the Error object.
  • The X Is Not a Function TypeError is a descendant of TypeError object.

When Should You Use It?

An X Is Not a Function TypeError typically occurs in one of the following three scenarios:

  • When a function call is made on a property of that simply isn’t a function.
  • When a function call is made on an object type that doesn’t contain that function or method.
  • When a function call is made on a built-in method that expects a callback function argument to be provided, but no such function exists.

Let’s go down the list and take a look at some code that illustrate each of these scenarios. To begin we have a sparse HTML page with a title property. The proper way to retrieve that property is typically by calling the document.title property. Thus, in our JavaScript <script> tag we call document.title and output the result to confirm it works:

As expected, the output shows us what we’re after:

However, since document.title is a property, what happens if we try to call it like a function (with parentheses)?

Now we’ve accidentally caused a X Is Not a Function TypeError to be thrown because we’re trying to call document.title()like a function instead of a property:

Another common cause of X Is Not a Function TypeErrors is when trying to call a particular method on an object that doesn’t contain that method/function call. For example, here we have a pair of Arrays that contain information about our book (Robinson Crusoe) that we want to combine into one single array. Thankfully, we can simply use the Array.prototype.concat() method to take our book array and combine it with the passed in publisher array:

The resulting combined output shows our concatenation works as expected:

Let’s try the same thing but for a pair of Objects with the same sort of data about our book. Here we try to combine the book and publisher objects using the concat() method call on book just as before:

Unfortunately, Object.prototype.concat() isn’t a valid method, so a X Is Not a Function TypeError is thrown:

In this case we can concatenate our Objects together by calling the Object.assign() method:

Sure enough this accomplished what we were after and outputs the expected result, which is similar to the Arrayconcatenation functionality above:

Our final scenario where X Is Not a Function TypeErrors can commonly occur is when using any of the built-in methods that expect a provided callback function as an argument, but no function is given. For example, here we want to use the Array.prototype.every() method to loop through every element of our array and check if it passes some logic. However, in this case we’ve forgotten to provide the required callback function as the first argument (instead we just have a string):

As you might imagine this results in a X Is Not a Function TypeError output:

The correct way to use built-in methods like Array.prototype.every() is to provide a callback function as the first argument, which will execute once for every element in the array. In this case, we’re testing whether all elements are less than or equal to 10 — if so, we return true:

This outputs our expected result:

To dive even deeper into understanding how your applications deal with JavaScript Errors, check out the revolutionary Airbrake JavaScript error tracking tool for real-time alerts and instantaneous insight into what went wrong with your JavaScript code.