Common Causes
- Typo in method name —
array.lenght() instead of array.length
- Wrong variable — calling a variable that holds undefined instead of a function
- Method doesn't exist — calling a method that isn't available on that type
- Missing import — function not imported or not in scope
- Async result — trying to call a function on a Promise instead of its resolved value
Debugging Steps
// Check what the thing actually is before calling it
console.log(typeof myFunction); // should be 'function', not 'undefined'
console.log(myArray); // check the array exists and has the method
// Common mistake: calling .length() — it's a property, not a method
const arr = [1, 2, 3];
arr.length(); // ❌ TypeError: arr.length is not a function
arr.length; // ✅ 3
Examples & Fixes
// ❌ Typo
document.getElementByID('btn'); // wrong — capital D
document.getElementById('btn'); // ✅
// ❌ Method on wrong type
const num = 42;
num.map(x => x * 2); // TypeError — numbers don't have .map()
[42].map(x => x * 2); // ✅
// ❌ Async mistake
async function getUser() { return { name: 'Alice' }; }
const user = getUser(); // user is a Promise, not an object
user.getName(); // TypeError
const user = await getUser(); // ✅
user.name; // ✅
// ❌ Callback is undefined
function run(callback) { callback(); }
run(); // TypeError — no callback passed
run(() => {}); // ✅
// Safe pattern
function run(callback) {
if (typeof callback === 'function') callback();
}