TypeError: "x" ist keine Funktion

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

Es wurde versucht, einen Wert aus einer Funktion aufzurufen, aber der Wert ist tatsächlich keine Funktion. Teile des Codes erwarten, dass Sie eine Funktion bereitstellen, was jedoch nicht geschehen ist.

Vielleicht liegt ein Tippfehler im Funktionsnamen vor? 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 schon.

Es gibt viele eingebaute Funktionen, die eine (Callback-)Funktion benötigen. Sie müssen eine Funktion bereitstellen, um diese Methoden ordnungsgemäß arbeiten zu lassen:

• Wenn Sie mit Array oder TypedArray Objekten arbeiten:

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

• Wenn Sie mit Map und Set Objekten arbeiten:

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

In diesem Fall, der viel zu oft vorkommt, 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 funktionieren nur mit bestimmten Objekten. In diesem Beispiel wird Array.prototype.map() verwendet, das nur mit Array Objekten funktioniert.

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

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

// TypeError: obj.map is not a function

Verwenden Sie stattdessen ein Array:

const numbers = [1, 4, 9];

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

Manchmal hat man beim Erstellen einer Klasse eine Eigenschaft und eine Funktion mit demselben Namen. Beim Aufrufen 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 Verwendung der letzteren Option führt zu einem Fehler:

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 einer Helfer-Bibliothek (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;

Die korrekte Nutzung des Imports (App.js):

import helpers from "./helpers";

• Funktionen