A exeção de JavaScript "is not a function" ocorre quando há uma tentativa de chamar um valor a partir de uma função, mas o valor não é uma função.
Mensagem
TypeError: Object doesn't support property or method {x} (Edge) TypeError: "x" is not a function
Tipo de erro
O que deu errado?
Tentou chamar um valor a partir de uma função, mas o valor não é uma função. Isto acontece quando algum código espera que se forneça uma função, mas isso não acontece.
Talvez haja um erro no nome da função? Pode ser que o objeto a que está a chamar o método não tenha esta função? Por exemplo, um Object
não tem função de map
, mas o Array
tem.
Há muitas funções que necessitam de uma função como parâmetro (callback). Terá de fornecer uma função para que estes métodos funcionem corretamente:
- Quando se trabalha com objetos
Array
ouTypedArray
: - Quando se trabalha com objetos
Map
eSet
:
Exemplos
Um erro no nome da função
Neste caso existe um erro no nome função:
let x = document.getElementByID('foo');
// TypeError: document.getElementByID is not a function
O nome correto da função é getElementById
:
let x = document.getElementById('foo');
Função é chamada no objeto errado
Para certos métodos, é necessário fornecer uma função (callback) e funcionará apenas em objetos específicos. Neste exemplo, é utilizado o Array.prototype.map()
, que funcionará apenas com objetos Array
.
let obj = {a: 13, b: 37, c: 42};
obj.map(function(num) {
return num * 2;
});
// TypeError: obj.map is not a function
Use antes uma matriz:
let numbers = [1, 4, 9];
numbers.map(function(num) {
return num * 2;
});
// Array [2, 8, 18]
Function shares a name with a pre-existing property
Por vezes, ao criar uma classe, pode ter uma propriedade e uma função com o mesmo nome. Ao chamar a função, o compilador pensa que a função deixa de existir.
var Dog = function () {
this.age = 11;
this.color = "black";
this.name = "Ralph";
return this;
}
Dog.prototype.name = function(name) {
this.name = name;
return this;
}
var myNewDog = new Dog();
myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function
Use um nome diferente para a propriedade:
var Dog = function () {
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;
}
var myNewDog = new Dog();
myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }
Usar parênteses para multiplicação
Em matemática, pode escrever 2 × (3 + 5) como 2*(3 + 5) ou somente 2(3 + 5).
Usar a última forma dá um erro:
const sixteen = 2(3 + 5); alert('2 x (3 + 5) is ' + String(sixteen)); //Uncaught TypeError: 2 is not a function
Pode corrigir o erro com a operadora *
:
const sixteen = 2 * (3 + 5); alert('2 x (3 + 5) is ' + String(sixteen)); //2 x (3 + 5) is 16
Importar o modulo exportado corretamente
Certifique-se que está a importar o módulo corretamente.
Um exemplo de uma biblioteca helper (helpers.js
)
let helpers = function () { };
helpers.groupBy = function (objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
},
{});
}
export default helpers;
A utilização correta de importação (para App.js
) é:
import helpers from './helpers'