01 - How to fix "Uncaught TypeError: x is not a function" in JavaScript.

What causes this error?

var myObject = {
  color: "green",
  getColor: function(){
    return "green"
  }
}

myObject.getColor();
// -> green

myObject.getHeight();
// -> TypeError: myObject.getHeight is not a function.
 

The getColor() method exists on myObject because we defined it above. The getHeight() method does NOT exist, which causes the TypeError: myObject.getHeight is not a function error.

Exercise

// Ex: Resolve the error
// Ensure the result field reads "Pilot"
var car = {
  getMake: function() {
    return "Honda";
  }
}

car.getModel(); 

Transcript

0:00 Uncaught TypeError: x is not a function. JavaScript errors are one of THE toughest things to figure out when you're getting started with JavaScript. Let's briefly go over this error, [and] look at what causes it. Then we'll discuss how to avoid it and how to solve it.

0:17 Let's take a look at some code. Right now I have everything commented out, which means when I run this [code] nothing happens (as expected). Now, what happens if I try to execute this line here? This [code] is going to try to look for a function called hello, and will try to execute it. Reference error: hello is not defined. What it's telling us here is that it can find anything named hello. Can't find a variable [or] a function.

0:40 Here we get the same thing: myObj is not defined. It doesn't care that there's something after hello. Because it's saying this first part here (myObj), I have no idea what this is. I can't find it. So let's uncomment this section here. Here we're defining an object and we're attaching a property called getColor, which is a function, which when called, will return a string of red. TypeError: myObj. hello is not a function. This is exactly the error this episode is about. So what this means is it was able to find the myObj object, and then it tried to call the hello method on that [object]. When there's a function attached to an object, we call that a method. Sometimes you'll hear it called a function. It really doesn't matter. I'm going to use those two terms interchangeably. So what this error means is we are able to find the object myObj, but we are not able to find a method attached to that object called hello.myObj. hello is not a function. So how do we resolve this? Usually it's either a typo, or it simply just doesn't exist. So if you checked for typos, and that didn't work, we can console.log().

1:45 So after the error we see this: getColor. So that tells that the only method attached to myObj is getColor.

1:59 No errors. Why don't we log this out so we can see if it returns the proper value. This time we'll actually name it so can see that here. color is red, fantastic!

2:10 In summary, if you ever see TypeError: "[name of the function] is not a function", (or even undefined is not a function in an older browser), chances are very good that you're calling a method on an object where the object exists, but the method doesn't. That's it Good luck.

END