JavaScript — TypeError: x is not a function

#Что означает ошибка

Ошибка TypeError: x is not a function значит, что вы вызываете как функцию значение, которое функцией не является: undefined, объект, строку или результат другой операции. Это самая частая ошибка новичков и при работе с колбэками.

Найдите строку в стеке ошибки, проверьте, что находится в переменной на момент вызова.

Типичные причины: опечатка в имени метода, неправильный импорт, потерянный контекст this и порядок загрузки скриптов.

TypeError: x is not a function в JavaScript значит, что вы вызываете как функцию то, что ею не является: undefined, объект, строка или результат несовместимого API.

Консоль браузера покажет строку.

Нужно понять, чем реально является x.

Ошибка означает вызов значения, не являющегося функцией: опечатка в имени, перезаписанная переменная или неверный объект. Проверьте тип значения через typeof и порядок подключения скриптов.

#Причины и решения

#Пошаговое решение

1. Прочитайте стекОткройте страницу с ошибкой в браузере и нажмите F12 → «Консоль» (Console). Нажмите на имя файла и номер строки справа от TypeError: ... is not a function — инструменты разработчика откроют точное место вызова. Если файл минифицирован, используйте форматирование {} либо исходные карты, если они опубликованы. Запишите, какая переменная или свойство вызывается со скобками (). Для obj.method() важно проверить именно obj.method, а не только obj.
2. Проверьте типПеред проблемной строкой временно вставьте console.log(typeof obj.method, obj.method) (для своего obj и method) либо установите точку останова слева от строки во вкладке Sources. Запустите страницу заново. Если тип undefined, метод не существует или данные ещё не пришли; если string/object, в переменной лежит не функция. Проверяйте значения осторожно: в журналах не должны оказаться токены доступа или персональные данные. После диагностики удалите временный вывод.
3. Сверьте имя и регистрПроверьте точное имя метода и регистр букв по документации API: например, getElementById, а не getElementByID. Если вызываете метод массива, сначала проверьте Array.isArray(value); forEach не применяется к любому объекту автоматически. Для переменной, полученной от API, посмотрите вкладку Network → Response и учтите, что данные могут иметь другой формат. Исправьте тип данных в источнике либо преобразуйте его осмысленно, а не подавляйте исключение без проверки.
4. Проверьте импорт/подключениеЕсли ошибка появилась после добавления библиотеки, откройте вкладку Network и убедитесь, что нужный JS-файл загрузился со статусом 200 и правильным типом содержимого. В проекте с модулями сравните export default/именованный export с соответствующим import; при CommonJS проверьте форму module.exports. В HTML со старыми глобальными скриптами проверьте их порядок и defer, не путайте модульный type="module" с глобальными переменными. После исправления перезагрузите страницу с отключённым кэшем и убедитесь, что ошибка исчезла.
5. Проверьте контекстЕсли передаёте метод объекта как обработчик, проверьте контекст this: вызов const f = obj.method; f() может потерять объект. Там, где необходим исходный объект, используйте obj.method.bind(obj) либо () => obj.method(); это не исправляет ситуацию, если obj.method на самом деле не функция. Повторите действие пользователя и проверьте, что функция выполнилась и данные изменились ожидаемо; если нет, вернитесь к типу значения и стеку ошибки.

#Диагностика

Откройте консоль (F12) и перейдите на строку из ошибки. Выведите значение: console.log(typeof x, x);. Типичные причины: опечатка в имени метода, вызов метода массива у объекта (obj.map), использование .length() вместо .length, импорт по умолчанию вместо именованного (import {fn} и import fn), порядок подключения скриптов.

#Частые случаи

$ is not a function — jQuery не загружен или конфликт версий. x.forEach is not a function — x не массив (используйте Array.from(x)). callback is not a function — не передан обратный вызов. require(...) is not a function — неверный экспорт модуля (module.exports против exports.default). Асинхронные данные: на момент вызова значение ещё undefined.

#Защита

Проверяйте тип: if (typeof fn === "function") fn(); но не применяйте fn?.() к строкам и объектам: необязательная цепочка не проверяет тип функции. Включите TypeScript или JSDoc-проверку. Используйте линтер ESLint с правилами no-undef, no-unused-vars. Проверьте версию библиотеки и документацию API.

#Диагностика

Откройте консоль (F12). В сообщении указано имя и строка. Добавьте перед вызовом console.log(typeof obj.method, obj). Если выводится undefined, метод не существует — проверьте регистр (getElementByID вместо getElementById) и документацию на MDN.

#Типичные причины

Импорт: import foo from "./foo" вместо import { foo } from "./foo"; require модуля, экспортирующего объект. Результат .map() или .filter() вызывается как функция. new пропущен для класса. Метод объекта передан как колбэк и потерял this — используйте стрелочную функцию или .bind(this). Библиотека (jQuery плагин) подключена до jQuery или не подключена.

#Защита

Для необязательных функций используйте if (typeof cb === "function") cb(); или оператор cb?.(). Для асинхронных данных проверяйте, что ответ получен, и не вызывайте методы до загрузки. Включите ESLint с правилом no-undef и TypeScript — они находят такие ошибки до запуска.