TypeError: "x" is not a function

메시지

타입 에러: Object doesn't support property or method {x} (Edge)
타입 에러: "x" 는 function이 아닙니다.

에러 종류

TypeError.

무엇이 잘못되었는가?

이것은 함수로부터 값을 불러오려 시도했지만, 실제로는 해당 값이 함수가 아닐 때 발생합니다. 몇몇 코드는 당신이 함수를 반환할 것이라 예상해도, 실제로는 아닌 것들이 존재합니다.

혹시 함수 이름에 오타가 있나요? 혹시 당신이 호출한 object가 이 함수를 가지고 있는게 맞나요? 예를 들어, 자바스크립트는 map 함수를 가지고 있지 않습니다. 하지만 자바스크립트 Array object 는 이걸 가지고 있죠.

콜백 함수를 필요로 하는 내장 함수들이 많이 존재합니다. 당신은 이 함수들을 정확히 동작하도록 하기 위해 함수 형식을 인자로 넣어야 합니다:

• When working with Array or TypedArray objects:
  • Array.prototype.every(), Array.prototype.some(), Array.prototype.forEach(), Array.prototype.map(), Array.prototype.filter(),  Array.prototype.reduce(), Array.prototype.reduceRight(), Array.prototype.find()
• When working with Map and Set objects:
  • Map.prototype.forEach() and Set.prototype.forEach()

예시

함수 이름의 오타

이 경우는 함수 이름에 오타가 있는 상황에서 자주 일어납니다 :

var x = document.getElementByID('foo');
// 타입 에러: document.getElementByID 는 function이 아닙니다.

올바른 함수의 이름은 getElementById 입니다:

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

잘못된 object에서 함수를 호출

For certain methods, you have to provide a (callback) function and it will work on specific objects only. In this example, Array.prototype.map() is used, which will work with Array objects only.

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

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

// TypeError: obj.map is not a function

Object대신 Array를 사용:

var numbers = [1, 4, 9];

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

// Array [2, 8, 18]

Function shares a name with a pre-existing property

Sometimes when making a class, you may have a property and a function with the same name. Upon calling the function, the compiler thinks that the function ceases to exist.

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 a different property name instead:

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' }

Using brackets for multiplication

In math, you can write 2 x (3 + 5) as 2*(3 + 5) or just 2(3 + 5). Using the latter will throw an error:

var sixteen = 2(3 + 5);
alert('2 x (3 + 5) is ' + String(sixteen));
//Uncaught TypeError: 2 is not a function

You can correct the code by adding a * operator:

var sixteen = 2 * (3 + 5);
alert('2 x (3 + 5) is ' + String(sixteen));
//2 x (3 + 5) is 16

같이보기

• Functions