TypeError: "x" не является функцией

Исключение JavaScript "is not a function" возникает, когда была предпринята попытка вызвать значение из функции, но это значение на самом деле не является функцией.

Сообщение

TypeError: "x" is not a function. (V8-based & Firefox & Safari)

Тип ошибки

TypeError

Что пошло не так?

Была предпринята попытка вызвать значение из функции, но это значение на самом деле не является функцией. Какой-то код ожидает, что вы предоставите функцию, но этого не произошло.

Возможно, в названии функции есть опечатка? Возможно, у объекта, у которого вы вызываете метод, нет этой функции? Например, JavaScript Objects не имеет функции map, а объект JavaScript Array — имеет.

Есть много встроенных функций, которым требуется (обратный вызов) функция. Вам придется предоставить функцию, чтобы эти методы работали должным образом:

• При работе с объектами Array или TypedArray:
  • Array.prototype.every(), Array.prototype.some(), Array.prototype.forEach(), Array.prototype.map(), Array.prototype.filter(), Array.prototype.reduce(), Array.prototype.reduceRight(), Array.prototype.find()
• При работе с объектами Map и Set:
  • Map.prototype.forEach() и Set.prototype.forEach()

Примеры

Опечатка в названии функции

В этом случае, что случается слишком часто, в названии метода есть опечатка:

const x = document.getElementByID("foo");
// TypeError: document.getElementByID is not a function

Правильное название функции — getElementById:

const x = document.getElementById("foo");

Функция вызвана у неверного объекта

Для некоторых методов вам нужно предоставить (обратный вызов) функцию, и она будет работать только с определенными объектами. В этом примере используется Array.prototype.map(), который работает только с объектами Array.

const obj = { a: 13, b: 37, c: 42 };

obj.map((num) => num * 2);

// TypeError: obj.map is not a function

Вместо этого используйте массив:

const numbers = [1, 4, 9];

numbers.map((num) => num * 2); // [2, 8, 18]

Функция имеет то же имя, что и существующее свойство

Иногда при создании класса вы можете иметь свойство и функцию с одинаковым именем. При вызове функции компилятор считает, что функция перестает существовать.

function Dog() {
  this.age = 11;
  this.color = "black";
  this.name = "Ralph";
  return this;
}

Dog.prototype.name = function (name) {
  this.name = name;
  return this;
};

const myNewDog = new Dog();
myNewDog.name("Cassidy"); // TypeError: myNewDog.name is not a function

Вместо этого используйте другое имя свойства:

function Dog() {
  this.age = 11;
  this.color = "black";
  this.dogName = "Ralph"; // Using this.dogName instead of .name
  return this;
}

Dog.prototype.name = function (name) {
  this.dogName = name;
  return this;
};

const myNewDog = new Dog();
myNewDog.name("Cassidy"); // Dog { age: 11, color: 'black', dogName: 'Cassidy' }

Использование скобок для умножения

В математике 2 × (3 + 5) можно записать как 2*(3 + 5) или просто 2(3 + 5).

Использование последнего варианта вызовет ошибку:

const sixteen = 2(3 + 5);
console.log(`2 x (3 + 5) is ${sixteen}`);
// Uncaught TypeError: 2 is not a function

Вы можете исправить код, добавив оператор *:

const sixteen = 2 * (3 + 5);
console.log(`2 x (3 + 5) is ${sixteen}`);
// 2 x (3 + 5) is 16

Правильный импорт экспортированного модуля

Убедитесь, что вы правильно импортируете модуль.

Пример библиотеки вспомогательных функций (helpers.js)

function helpers() {}

helpers.groupBy = function (objectArray, property) {
  return objectArray.reduce((acc, obj) => {
    const key = obj[property];
    acc[key] ??= [];
    acc[key].push(obj);
    return acc;
  }, {});
};

export default helpers;

Правильное использование импорта (App.js):

import helpers from "./helpers";

См. также

• Функции