“Undefined Is Not a Function” in JavaScript: Meaning & Fixes

Few JavaScript errors are as confusing as “undefined is not a function”. You write what looks like normal code, you call a method, and the browser refuses to run it. Even stranger, the same code may have worked yesterday, which makes you wonder if JavaScript itself changed.

It did not. This error always has a logical explanation, and once you understand what JavaScript is really saying, the fix is usually quick. In this guide, you will learn what the message means in plain English, the most common reasons it appears, and a step-by-step way to track down and fix the exact line causing it in your own projects.

Quick Answer

“Undefined is not a function” means your code tried to call something as a function, but that value is actually undefined — it does not exist. Fix it by checking that the function or method name is spelled correctly, that the object actually has that method, that any library or file is loaded before you use it, and that you are not overwriting the function with an undefined value.

What the Message Really Means

JavaScript allows you to call a value only if that value is a function. When you write something(), JavaScript first looks up something, then checks whether it can be called. If the lookup returns undefined, there is nothing to call, so the engine throws a TypeError.

Modern browsers often phrase this slightly differently. Chrome may say “user.getName is not a function“, Firefox may say “user.getName is not a function” as well, and older browsers and older Node versions used the exact wording “undefined is not a function”. All of these describe the same situation: the thing before the parentheses is not a callable function.

A helpful way to think about it is a phone number. Calling a number that was never saved is not a problem with the phone. The problem is that there is no number to dial. In code, the missing number is almost always a missing method, a typo, a failed import, or data that has a different shape than you expected.

Most Common Causes Explained

1. Typo in the Function or Method Name

JavaScript is case-sensitive and exact. Writing addEventlistener instead of addEventListener, or getElementByID instead of getElementById, looks up a property that does not exist. That lookup returns undefined, and calling it fails.

Typos are especially common with long library methods and with names that mix British and American spelling, such as color-related helpers. Always compare the name in your code character by character with the documentation.

2. Calling a Method on the Wrong Type

Methods belong to specific types. Arrays have map, filter, and forEach. Strings have split and trim. Plain objects do not automatically have those methods.

A very common case is API data. You expect an array, but the API returns an object that contains an array, like { results: [...] }. Calling data.map(...) on that object fails because map is undefined on a plain object. The fix is to call the method on data.results instead.

3. The Function Was Overwritten or Never Defined

If you accidentally assign a new value to a variable that held a function, the function disappears. For example, reusing the same name for a result variable can replace a helper you still need later in the same scope.

The same result happens when a function is defined inside a condition or block that never runs. If the definition is skipped, later calls find only undefined.

4. Script or Library Not Loaded Yet

If your code depends on another file, a plugin, or a CDN library, order matters. Calling a library function before the library script finishes loading gives you the same error. This also happens with modules when an import path is wrong and the imported value ends up empty.

5. Using a Method That Does Not Exist in That Browser or Version

Newer JavaScript methods are not available everywhere at once. A method that works in the latest Chrome may be missing in an older browser or an older Node version. In that environment, the property exists in your code text but is undefined at runtime.

How to Debug It Step by Step

1. Read the full error and stack trace in the Console. Note the exact file, line number, and the full name before “is not a function”.
2. Go to that line and log the value before you call it, for example console.log(typeof obj.method, obj).
3. If the log shows undefined, inspect the whole object. Use console.log(Object.keys(obj)) to see which methods and properties it actually has.
4. Check the spelling against the official documentation or the source where the function should be defined.
5. Confirm the type. Use Array.isArray(value) for arrays and typeof value for functions before calling methods that depend on the type.
6. Verify load order. Make sure defining scripts come before calling scripts, and check the Network tab for any failed file requests marked in red.
7. Search your project for another assignment to the same name that might have overwritten the function earlier.

This routine works because the error is never random. There is always a lookup that returned undefined, and logging the object just before the call reveals that lookup immediately.

Proven Fixes for Each Situation

Correct the Name and the Receiver

Fix spelling, capitalization, and the object you call the method on. If documentation says array.forEach(...), make sure your variable is truly an array and not a string, an object, or a NodeList that needs conversion with Array.from(...) in older code.

Guard the Call When the Method Is Optional

When a method may legitimately be absent, check before calling:

if (typeof obj.save === "function") { obj.save(); }

You can also use optional calling with obj.save?.(), which only calls the function if it exists. This is useful for optional callbacks and plugin hooks, but do not use it to hide a typo that should be fixed properly.

Fix Imports, Exports, and Load Order

In modules, confirm the exporting file uses the matching export style. A default export must be imported as a default, and a named export must use the exact same name in curly braces. One mismatch and the imported value becomes undefined. For classic scripts, move the library script tag above your own script or use the defer attribute consistently so execution order is predictable.

Keep Function Names and Data Names Separate

Use clear, distinct names. Do not name a variable formatDate if formatDate is also your helper function. Consistent naming prevents accidental overwrites and makes the stack trace much easier to read for everyone on the team.

If you see this error together with other TypeErrors, work through our overview of common JavaScript TypeErrors and how to fix them to build a complete picture of how these messages relate to each other.

Mistakes and Tips to Remember

• Do not assume the API shape: Log the real response once. Many “not a function” errors are simply a method called on an object wrapper instead of the inner array or string.
• Check parentheses carefully: Writing obj.method without () does not call it, and writing a property value with () tries to call data as code. Both mistakes produce confusing results.
• Avoid shadowing built-ins: Naming your variable name, event, or length in the wrong scope can interfere with browser globals and create hard-to-spot failures.
• Test in the target environment: If users run an older browser, verify that the methods you use are supported there or provide a fallback.
• Read documentation examples exactly: Copy one working example first, confirm it runs, then adapt it to your data step by step.

For reference, the MDN Web Docs page for “is not a function” errors lists the exact browser messages and the classic causes, including calling a non-function value and using a method on the wrong object type.

Conclusion

“Undefined is not a function” simply means JavaScript could not find a callable function where your code expected one. The cause is almost always one of a small set: a typo, a method called on the wrong type, a missing or overwritten definition, a load-order problem, or an unsupported method. By logging the value before the call, checking its real type and keys, and verifying names against the documentation, you can pinpoint the problem in minutes. Fix the underlying lookup instead of only guarding the call, keep names clear and separate, and this error will become one of the easiest JavaScript problems for you to solve.

Frequently Asked Questions

Why does Chrome say “is not a function” instead of “undefined is not a function”?

They are the same error with updated wording. Newer engines include the property name, such as items.map is not a function, to help you locate the problem. Older engines used the shorter “undefined is not a function” phrasing.

How can I tell if a value is a function before calling it?

Use typeof value === "function". If the check returns true, it is safe to call. If it returns "undefined" or another type, find out why the expected function is missing before proceeding.

Why does .map fail even though I can see the data in the console?

Seeing data is not enough; it must be an array. If the data is an object containing an array, call map on the inner array property. Log Array.isArray(data) to confirm the real type quickly.

Can a wrong import cause this error?

Yes. If you import a name that the other file does not export in that form, the imported binding can be undefined. Calling it then throws this error. Check that default and named exports match their imports exactly.

Is optional calling with ?.() a good permanent fix?

It is a good fix only when the function is genuinely optional, like a callback a caller may or may not provide. For required functions, it hides the real bug and should be used only as a temporary diagnostic step.