TypeError: "x" is not a function

Mensaje

TypeError: "x" is not a function

Tipo de error

TypeError.

驴Qu茅 sali贸 mal?

Se ha intentado llamar a un elemento o valor como si fuera una funci贸n, pero no lo era. El c贸digo esperaba que hubiera una funci贸n implementada, pero no la ha encontrado.

驴Est谩 bien escrito el nombre de la funci贸n?驴El objeto sobre el que est谩s haciendo la llamada tiene ese m茅todo implementado realmente? Por ejemplo, los objetos tipo Array tienen implementada la funci贸n map, pero el resto de tipos no la tienen.

Hay muchas funciones propias de Javascript (built-in) que necesitan una funci贸n de callback, por lo que tienes que pasar esa funci贸n como par谩metro para que estos m茅todos funcionen correctamente.

Ejemplos

Nombre de la funci贸n mal escrito

En este caso, que ocurre con mucha frecuencia, el nombre de la funci贸n est谩 mal escrito:

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

El nombre correcto de la funci贸n es getElementById:

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

Funci贸n llamada en el objeto equivocado

Puede que el m茅todo que queramos usar no est茅 implementado en el tipo de objeto que estemos usado. En este ejemplo, queremos usar el m茅todo map, que recibe una funci贸n de callback como argumento, pero solo lo tienen los objetos Array.

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

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

// TypeError: obj.map is not a function

Como obj es un diccionario (parejas clave/valor), no tiene m茅todo map y se produce el error. Para evitarlo, hay que usar un Array:

var numeros = [1, 4, 9];

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

// Array [ 2, 8, 18 ]

La funci贸n comparte un nombre con una propiedad preexistente

A veces, al hacer una clase, puede tener una propiedad y una funci贸n con el mismo nombre. Al llamar a la funci贸n, el compilador piensa que la funci贸n deja de existir.

var Perro = function () {
 this.edad = 11;
 this.color = "negro";
 this.nombre = "Rafael";
 return this;
}

Perro.prototype.nombre = function(nombre) {
 this.nombre = nombre;
 return this;
}


var miNuevoPerro = new Perro();
miNuevoPerro.nombre("Lilly"); //Uncaught TypeError: myNewDog.name is not a function

Utilice un nombre de propiedad diferente en su lugar:

var Perro = function () {
 this.edad = 11;
 this.color = "negro";
 this.nombrePerro = "Rafael"; //Usando this.nombrePerro en vez de .nombre
 return this;
}

Perro.prototype.nombre = function(nombre) {
 this.nombrePerro = nombre;
 return this;
}


var miNuevoPerro = new Perro();
miNuevoPerro.nombre("Lilly"); //Perro { edad: 11, color: 'negro', nombrePerro: 'Lilly' }

Ve tambi茅n