TypeError: "x" is not a function

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

TypeError

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:

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'

Ver também