How to Fix TypeError: X is not a function in JavaScript

In this tutorial, you'll learn about How to Fix TypeError: X is not a function in JavaScript. We cover key concepts, practical examples, and best practices.

The Problem

JavaScript throws TypeError: X is not a function when you try to call a value as a function, but the value is actually undefined, an object, a string, or another non-function type.

Quick Fix

Step 1: Log the variable before calling it

Check the type of the variable to understand what you are dealing with:

function process(data) {
    data.map(item => item.name);
}
process({ users: [] });

TypeError: data.map is not a function

Log the type first:

function process(data) {
    console.log(typeof data, data);
}
process({ users: [] });

object { users: [] }

Access the array inside the object:

function process(data) {
    data.users.map(item => item.name);
}
process({ users: [] });

Step 2: Check import/export style

A default import of a named export results in undefined:

// utils.js
export const formatDate = (date) => date.toISOString();

// app.js
import formatDate from './utils.js';
console.log(formatDate(new Date()));

TypeError: formatDate is not a function

Use named import syntax:

import { formatDate } from './utils.js';
console.log(formatDate(new Date()));

2026-06-24T00:00:00.000Z

Step 3: Wait for DOM elements to exist

If a script runs before the DOM is ready, querySelector returns null:

document.querySelector('button').addEventListener('click', handler);

TypeError: document.querySelector(...) is null

Wait for the DOM:

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('button').addEventListener('click', handler);
});

Step 4: Handle async data properly

A variable assigned inside a callback is not available synchronously:

let data;
fetch('/api/data').then(r => r.json()).then(d => data = d);
console.log(data.map(x => x.id));

TypeError: data is undefined

Move the consuming code inside the promise chain:

fetch('/api/data')
    .then(r => r.json())
    .then(data => console.log(data.map(x => x.id)));

Prevention

• Use console.log(typeof value, value) before calling any function reference.
• Match import style to export style (named vs default).
• Use Array.isArray(value) before calling array methods.
• Prefer const to avoid accidental reassignment of function references.

Common Mistakes with typeerror not function

1. Forgetting deriving (Show, Eq) on custom data types needed for debugging
2. Placing the wildcard pattern first in case expressions, making all subsequent patterns unreachable
3. Using head and tail instead of pattern matching, causing runtime errors on empty lists

These mistakes appear frequently in real-world JS code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ