TypeError: "x" ist keine Funktion

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

Es wurde versucht, einen Wert aus einer Funktion aufzurufen, der Wert ist jedoch tatsächlich keine Funktion. Einige Codeabschnitte erwarten, dass Sie eine Funktion bereitstellen, was in diesem Fall nicht geschehen ist.

Vielleicht gibt es einen Tippfehler im Funktionsnamen? Vielleicht hat das Objekt, auf dem Sie die Methode aufrufen, diese Funktion nicht? Zum Beispiel haben JavaScript-Objects keine map-Funktion, aber das JavaScript-Array-Objekt hat eine.

Es gibt viele eingebaute Funktionen, die eine (Callback-)Funktion benötigen. Sie müssen eine Funktion zur Verfügung stellen, damit diese Methoden ordnungsgemäß funktionieren:

• Bei der Arbeit mit Array oder TypedArray Objekten:

  • Array.prototype.every(), Array.prototype.some(), Array.prototype.forEach(), Array.prototype.map(), Array.prototype.filter(), Array.prototype.reduce(), Array.prototype.reduceRight(), Array.prototype.find()

• Bei der Arbeit mit Map und Set Objekten:

  • Map.prototype.forEach() und Set.prototype.forEach()

In diesem Fall, der viel zu oft passiert, gibt es einen Tippfehler im Methodennamen:

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

Der korrekte Funktionsname ist getElementById:

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

Für bestimmte Methoden müssen Sie eine (Callback-)Funktion bereitstellen, und sie werden nur auf bestimmten Objekten funktionieren. In diesem Beispiel wird Array.prototype.map() verwendet, das nur mit Array-Objekten funktioniert.

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

obj.map(function (num) {
  return num * 2;
});

// TypeError: obj.map is not a function

Verwenden Sie stattdessen ein Array:

const numbers = [1, 4, 9];

numbers.map(function (num) {
  return num * 2;
}); // [2, 8, 18]

Manchmal, wenn Sie eine Klasse erstellen, kann es vorkommen, dass Sie eine Eigenschaft und eine Funktion mit demselben Namen haben. Beim Aufruf der Funktion denkt der Compiler, dass die Funktion nicht mehr existiert.

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

Verwenden Sie stattdessen einen anderen Eigenschaftsnamen:

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' }

In der Mathematik können Sie 2 × (3 + 5) als 2*(3 + 5) oder einfach als 2(3 + 5) schreiben.

Die letztere Schreibweise wird einen Fehler auslösen:

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

Sie können den Code korrigieren, indem Sie einen *-Operator hinzufügen:

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

Stellen Sie sicher, dass Sie das Modul korrekt importieren.

Ein Beispiel für eine Hilfsbibliothek (helpers.js)

const helpers = function () {};

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;

Die korrekte Importnutzung (App.js):

import helpers from "./helpers";

• Funktionen