The error TypeError: X is not a function occurs when you try to call something as a function that isn't actually a function. This happens when the variable is undefined, null, or a different data type.
// ⌠Problem
let myFunc = 'not a function';
myFunc(); // TypeError: myFunc is not a function
// ✅ Solution 1: Check if it's a function
if (typeof myFunc === 'function') {
myFunc();
}
// ✅ Solution 2: Define the function properly
function myFunc() {
console.log('I am a function');
}
myFunc(); // Works!Trying to call a variable that contains a non-function value.
Calling a function with a typo in its name.
Trying to call an object property that's not a function.
Calling array methods on variables that aren't arrays.
Accidentally overwriting a function with another value.
// Variable is a string
let calculate = 'sum';
calculate(5, 10); // TypeError: calculate is not a function
// Variable is a number
let process = 42;
process(); // TypeError: process is not a function
// Variable is undefined
let handler;
handler(); // TypeError: handler is not a function// Check type before calling
let calculate = 'sum';
if (typeof calculate === 'function') {
calculate(5, 10);
} else {
console.error('calculate is not a function');
}
// Define as a function
let calculate = function(a, b) {
return a + b;
};
calculate(5, 10); // 15
// Or use arrow function
let calculate = (a, b) => a + b;
calculate(5, 10); // 15function calculateSum(a, b) {
return a + b;
}
// Typo: calculateSun instead of calculateSum
calculateSun(5, 10); // TypeError: calculateSun is not a function
// Case sensitivity
CalculateSum(5, 10); // TypeError: CalculateSum is not a function// Fix the typo
function calculateSum(a, b) {
return a + b;
}
calculateSum(5, 10); // 15 - Works!
// Use IDE autocomplete to avoid typos
// Use ESLint to catch undefined functionsconst user = {
name: 'John',
age: 30
};
user.greet(); // TypeError: user.greet is not a function
// Or accessing wrong property
const calculator = {
sum: function(a, b) { return a + b; }
};
calculator.add(5, 10); // TypeError: calculator.add is not a function// Add the method to the object
const user = {
name: 'John',
age: 30,
greet: function() {
return `Hello, I'm ${this.name}`;
}
};
user.greet(); // "Hello, I'm John"
// Or use correct property name
const calculator = {
sum: function(a, b) { return a + b; }
};
calculator.sum(5, 10); // 15
// Check if method exists
if (typeof user.greet === 'function') {
user.greet();
}let users = null;
users.map(u => u.name); // TypeError: users.map is not a function
// Or undefined
let items;
items.filter(i => i.active); // TypeError: items.filter is not a function
// Or wrong type
let data = 'not an array';
data.forEach(item => console.log(item)); // TypeError!// Initialize as array
let users = [];
users.map(u => u.name); // Works (returns [])
// Check if array before using
let users = null;
if (Array.isArray(users)) {
users.map(u => u.name);
}
// Use optional chaining with default
let users = null;
const names = users?.map(u => u.name) || [];
// Or nullish coalescing
let users = null;
(users ?? []).map(u => u.name);function calculate(a, b) {
return a + b;
}
// Accidentally overwrite
calculate = 42;
calculate(5, 10); // TypeError: calculate is not a function
// Or in loop
for (let calculate = 0; calculate < 10; calculate++) {
// calculate is now a number
}
calculate(5, 10); // TypeError!// Use const to prevent reassignment
const calculate = function(a, b) {
return a + b;
};
// calculate = 42; // TypeError: Assignment to constant variable
// Use different variable names
function calculate(a, b) {
return a + b;
}
for (let i = 0; i < 10; i++) {
// Use 'i' instead of 'calculate'
}
calculate(5, 10); // Works!This error occurs when you try to call something as a function that isn't actually a function. Common causes include typos in function names, calling undefined variables, using wrong data types, or accidentally overwriting functions.
Check if the variable is actually a function using typeof, fix any typos in function names, ensure the function is defined before calling it, and verify you're calling the correct property name.
This happens when calling .map() on a variable that is not an array. The variable might be null, undefined, or a different data type. Check with Array.isArray() or use optional chaining.
Use typeof: if (typeof myVar === 'function') { myVar(); }. This checks if the variable is a function before calling it.
Yes, using const for function declarations prevents accidental reassignment. If you try to overwrite a const function, you'll get a different error that's easier to debug.
Explore 500+ free tutorials across 20+ languages and frameworks.