JavaScript TypeError: “xyz” is not a function – Code Example

JavaScript throws TypeError: something is not a function when you try to call a non-function entity with (). For example, if there is a variable x = 5 then if you try to run x() it will throw error.

Conditions of Error

Although the reason is single, but conditions of the error could be different. Think about it. What could be the conditions when you can misinterpret an entity as function? Well, there are 5 major overlooks –

1. You wrote the wrong function name.
2. Calling a function which doesn’t exist on an object.
3. Replacing function variable with another datatype.
4. Using () instead of [] for accessing array element.
5. If a variable name and a function name are identical.
6. Multiplying without * like a(b + c) instead of a * (b + c)

Let’s check out all these conditions one by one.

Wrong function name

Suppose you have a function with name myFunction() and while calling it, you mistyped it as myFuntion() then it will throw TypeError: myFuntion is not a function. Check this code example –

function myFunction() {
  return "myFunction"
}

console.log(myFuntion())

The output will be –

Uncaught ReferenceError: myFuntion is not defined
// OR
TypeError: myFuntion is not a function

The error is due to wrong function name. Check out this image –

The solution is to use linters which can indicate you when you try to call functions which doesn’t exists.

Calling function on objects which doesn’t exists

Objects have keys whose values can be integers, floats, strings, arrays, objects, functions etc. It means you can access the key to get the value. But, what you are using value for, can’t be known till you run the program. For example, you can try to access index of integer value, like this –

obj = {
  a: 12,
  b: 12.5,
  c: "I am string",
  d: [1, 2, "I", "am", "string"],
  e: {a: () => "I am function", j: 34},
  f: () => {return "function of f key"}
}

console.log(obj.a[1])

The output will be –

undefined

While an integer value can be indexed like an array, it is of less use because you will get undefined. Check this image –

On the other hand the same indexing on string will result into character at that position. Check this code –

obj = {
  a: 12,
  b: 12.5,
  c: "I am string",
  d: [1, 2, "I", "am", "string"],
  e: {a: () => "I am function", j: 34},
  f: () => {return "function of f key"}
}

console.log(obj.c[6])

The output will be –

t

Check it in screenshot too –

Similarly, you can also use an int variable as function by adding parenthesis to it like obj.a(2) but this will result into “not a function” error. Check this code –

obj = {
  a: 12,
  b: 12.5,
  c: "I am string",
  d: [1, 2, "I", "am", "string"],
  e: {a: () => "I am function", j: 34},
  f: () => {return "function of f key"}
}

console.log(obj.a(2))

The output will be TypeError –

Uncaught TypeError: obj.a is not a function

In firefox console, it will look like this –

But the same will work if the property is actually a function. So, obj.e.a() will work without issue. Code example –

obj = {
  a: 12,
  b: 12.5,
  c: "I am string",
  d: [1, 2, "I", "am", "string"],
  e: {a: () => "I am function", j: 34},
  f: () => {return "function of f key"}
}

console.log(obj.e.a())

The output will be –

I am function

Output in firefox console is –

Replacing function variable with another datatype

Since javascript is not type safe language, so you can easily assign a variable to any type of data. Suppose you have a variable which is assigned a function but later in code you used the same variable to assign some other data type like int, float, string, object etc. then accessing it as function will throw error. Check out this code –

a = () => {
  return "I am a function"
}

console.log(a())

a = 5

console.log(a())

The output will be –

I am a function
Uncaught TypeError: a is not a function

In the above code, the first console.log displayed the output but second one threw TypeError: a is not a function. This is because we reassigned the variable a to an integer value. Check out this image of firefox console –

The solution is to use const variables wherever possible. This will reduce the possibility of any such mistakes.

Using () instead of [] for accessing array element

Sometimes instead of using [] for accessing an array element, we use (), especially if you have Python background where tuples are defined using (). Doing so will lead to the TypeError. Check this example –

a = [1, 2, 3, 4, 5]

console.log(a(3))

The output is –

Uncaught TypeError: a is not a function

In the firefox console it will look like this –

The solution is to not use () in arrays while accessing any value.

Variable name and a function name are identical

There could be a confusion when the variable name and function name are identical. Of course the javascript interpreter will return an unexpected results and most probably a TypeError. Check this code –

a = 5

function a() {
  return 5;
}

console.log(a)

console.log(a())

The output will be –

5
Uncaught TypeError: a is not a function

The first console.log gave the value of variable a while the second console.log printed a TypeError. This is due to the same name of integer variable and function. Let’s check the output in firefox console –

The solution of this issue is to keep your function names and variable names different.

Multiplying without * like a(b + c) instead of a * (b + c)

This is not a common mistake but still could happen. In mathematics we generally omit x for multiplication in case of brackets like a x (b + c) = a(b + c). But the same is not valid in coding. a(b + c) will act as function a with argument as sum of b and c. Check this code –

a = 5
b = 6
c = 7

console.log(a * (b + c))

console.log(a(b + c))

The output will be –

65
Uncaught TypeError: a is not a function

You can see from the output that the first console printed the output correctly but second one threw TypeError. Because we omit * from multiplication. Check out how it will look like in firefox console –

Conclusion

In this article we saw multiple conditions in which we can get TypeError not a function. This helps in understanding the root cause of the issue. Hence finding solution will be easy.