TypeError: x is not a function 해결

증상

Uncaught TypeError: data.map is not a function

A.B is not a function은 B를 함수처럼 호출했는데 B가 함수가 아니다라는 뜻입니다.

원인

흔한 경우:

• 배열인 줄 알았는데 객체/undefined라서 .map이 없음 (API 응답 형태 오해)
• 메서드 이름 오타 (toUppercase → 올바른 건 toUpperCase)
• import 방식 실수 (default ↔ named)
• 같은 이름의 변수로 함수를 덮어씀

const data = { items: [1, 2] };
data.map((x) => x);   // ✕ data는 객체 → map 없음
data.items.map((x) => x); // ○

해결

1) 실제 타입부터 확인

console.log(typeof data, Array.isArray(data), data);

.map/.forEach/.filter가 없다고 하면 그 값이 배열이 아닐 가능성이 큽니다. 보통 API 응답이 { data: [...] }처럼 한 단계 감싸져 있습니다.

2) 오타·대소문자 확인

문자열은 toUpperCase, toLowerCase처럼 카멜케이스입니다. 자동완성을 활용하세요.

3) import 방식 확인

import lodash from 'lodash';        // default
import { debounce } from 'lodash';  // named

named export를 default로 가져오면 undefined가 되어 호출 시 이 오류가 납니다.

"is not a function"은 대부분 값의 타입이 예상과 다르다는 신호입니다. console.log로 그 값을 먼저 찍어보면 원인이 바로 보입니다.