TypeError: "x" is not a function

Type d'erreur

TypeError.

Quel est le problme ?

Une valeur a t utilise pour un appel de fonction alors que cette valeur n'est pas une fonction. Autrement dit, un fragment de code attendait une fonction mais a reu des valeurs d'un autre type.

Il est possible qu'il y ait une coquille dans le nom de la fonction. Peut tre que l'objet sur lequel la mthode est invoque ne possde pas cette fonction (par exemple, les objets Array possdent une fonction map() mais d'autres objets ne l'ont pas).

Il existe de nombreuses fonctions natives qui fonctionnent l'aide d'une fonction (callback) passe en argument :

• Pour les objets Array ou TypedArray, voici les fonctions qui utilisent une fonction en argument :

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

• Pour les objets Map et Set, voici les mthodes concernes :

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

Exemples

Une coquille dans le nom de la fonction

Dans ce cas, qui arrive bien trop souvent, il y a une faute d'orthographe dans le nom de la fonction utilise :

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

Le nom de la fonction est (dans cet exemple) getElementById (attention la casse pour les noms en JavaScript) :

var x = document.getElementById("toto");

Appeler une fonction sur le mauvais objet

Certaines mthodes ne fonctionnent que pour certains types d'objet et utilisent une fonction en argument. Ainsi, dans cet exemple, on utilise Array.prototype.map() qui ne fonctionne que sur les objets Array.

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

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

// TypeError: obj.map is not a function

Il faudra utiliser un tableau la place :

var nombres = [1, 4, 9];

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

// Array [ 2, 8, 18 ]

Utiliser le mme nom pour une mthode et une proprit

Lorsqu'on crit une classe, on peut malheureusement utiliser le mme nom pour une proprit et une mthode. Lorsqu'on appellera la fonction, celle-ci aura t remplace par la proprit et cela dclenchera une erreur :

var Chien = function () {
  this.age = 11;
  this.couleur = "noir";
  this.nom = "Ralph";
  return this;
};

Chien.prototype.nom = function (nom) {
  this.nom = nom;
  return this;
};

var monNouveauChien = new Chien();
monNouveauChien.nom("Cassidy"); // Uncaught TypeError: monNouveauChien.nom is not a function

Pour rsoudre le problme, on utilisera deux noms distincts pour la proprit et la mthode :

var Chien = function () {
  this.age = 11;
  this.couleur = "noir";
  this.nomChien = "Ralph";
  return this;
};

Chien.prototype.nom = function (nom) {
  this.nomChien = nom;
  return this;
};

var monNouveauChien = new Chien();
monNouveauChien.nom("Cassidy"); // Chien { age: 11, couleur: "noir", nomChien: "Cassidy" }

Utiliser des parenthses pour la multiplication

En notation mathmatique, on peut crire 2(3+5) pour indiquer qu'on souhaite multiplier 2 par 3 + 5. Toutefois, une telle criture n'est pas valide en JavaScript car il faut prciser l'oprateur de multiplication :

var seize = 2(3 + 5);
console.log("2 x (3 + 5) vaut " + String(seize));
// Uncaught TypeError: 2 is not a function

Pour corriger, il suffit d'ajouter l'oprateur * :

var seize = 2 * (3 + 5);
console.log("2 x (3 + 5) is " + String(seize));
//2 x (3 + 5) is 16

Importer un module export correctement

Assurez-vous d'importer le module correctement. Si par exemple, on dispose d'une bibliothque helpers.js avec le code suivant :

let helpers = function () {};
helpers.log = function (msg) {
  console.log(msg);
};

export default helpers;

Pour l'importer ct application, on crira :

import helpers from "./helpers";

Voir aussi

• Les fonctions