TypeError: X is not a function en JS : Toutes les Causes

TypeError: X is not a function — tu appelles quelque chose comme une fonction, mais ce n'en est pas une. C'est la 2e erreur JavaScript la plus fréquente. Voici les 6 causes et comment les corriger.

1. Faute de frappe dans le nom de la méthode

// ❌ "toLowercase" au lieu de "toLowerCase"
const name = 'ALI';
console.log(name.toLowercase()); // TypeError: name.toLowercase is not a function

// ✅ Bonne casse
console.log(name.toLowerCase()); // 'ali'

// ❌ Autres classiques
[1,2,3].foreach(x => x);   // forEach, pas foreach
JSON.Stringify({});          // stringify, pas Stringify
document.getElementByid('x'); // getElementById, pas getElementByid

Astuce : l'autocomplétion de ton éditeur (VS Code) évite 90% de ces erreurs. Si tu tapes les 3 premières lettres et que l'éditeur ne propose rien, c'est que le nom est faux.

2. Appeler .map() ou .filter() sur un non-tableau

Tu penses avoir un tableau, mais c'est un objet, un string, ou undefined.

// ❌ L'API retourne un objet, pas un tableau
const response = { data: [1, 2, 3], status: 'ok' };
response.map(x => x * 2); // TypeError: response.map is not a function

// ✅ Accéder au tableau dans l'objet
response.data.map(x => x * 2); // [2, 4, 6]

// ❌ La variable est undefined (donnée pas encore chargée)
const [users, setUsers] = useState();
users.map(u => u.name); // TypeError!

// ✅ Initialiser avec un tableau vide
const [users, setUsers] = useState([]);
users.map(u => u.name); // [] (pas d'erreur)

Réflexe : avant d'appeler .map(), vérifie avec console.log(typeof maVariable, Array.isArray(maVariable)).

3. Écraser une fonction avec une variable

// ❌ 'filter' est redéfini comme un string
let filter = 'actif';
const result = [1, 2, 3].filter(x => x > 1); // ✅ Ça marche ici

// Mais si tu fais :
filter = 'actif';
filter(items); // ❌ TypeError: filter is not a function
// filter est maintenant un string, plus une fonction !

// ❌ Écraser un import
import { useState } from 'react';
const useState = 'test'; // SyntaxError ou shadow

Règle : ne nomme jamais une variable comme une fonction/méthode existante. const filter, const map, const name sont des pièges courants.

4. Oublier d'exporter ou mauvais import

// utils.js — export par défaut
export default function calculerTotal(items) {
  return items.reduce((s, i) => s + i.prix, 0);
}

// ❌ Import nommé sur un export default
import { calculerTotal } from './utils'; // undefined!
calculerTotal(items); // TypeError: calculerTotal is not a function

// ✅ Import default = pas d'accolades
import calculerTotal from './utils';

// OU — export nommé
export function calculerTotal(items) { ... }
import { calculerTotal } from './utils'; // ✅ Avec accolades

Confusion export default vs export { } = la source n°1 des "is not a function" dans les projets React.

5. Parenthèses mal placées (IIFE accidentel)

// ❌ Le résultat de la fonction est stocké, pas la fonction elle-même
const getUser = fetch('/api/user').then(r => r.json());
// getUser est une Promise, pas une fonction
getUser(); // TypeError: getUser is not a function

// ✅ Stocker la fonction, pas son résultat
const getUser = () => fetch('/api/user').then(r => r.json());
getUser(); // ✅ Appelle la fonction qui retourne une Promise

// ❌ Appeler le résultat d'un appel
const total = calculerTotal(items);
total(); // TypeError: total is not a function (total est un nombre)

6. Callback undefined

// ❌ onSuccess n'est pas passé
function chargerDonnees({ onSuccess }) {
  fetch('/api/data')
    .then(r => r.json())
    .then(data => onSuccess(data)); // TypeError si onSuccess pas fourni
}
chargerDonnees({}); // Pas de onSuccess !

// ✅ Vérifier avant d'appeler
function chargerDonnees({ onSuccess } = {}) {
  fetch('/api/data')
    .then(r => r.json())
    .then(data => {
      if (typeof onSuccess === 'function') {
        onSuccess(data);
      }
    });
}

// ✅ Ou valeur par défaut
function chargerDonnees({ onSuccess = () => {} } = {}) {
  fetch('/api/data')
    .then(r => r.json())
    .then(data => onSuccess(data));
}

Comment debugger

1. Lire l'erreur : X.map is not a function → X n'est pas un tableau. Qu'est-ce que X ?
2. console.log + typeof : console.log(typeof X, X) juste avant la ligne qui crash
3. Vérifier les imports : console.log(maFonction) — si c'est undefined, l'import est cassé

// Technique rapide
console.log('Type:', typeof maVariable);     // 'function' ? 'object' ? 'undefined' ?
console.log('Array?:', Array.isArray(maVariable)); // true/false
console.log('Value:', maVariable);            // La valeur réelle

Résumé

FAQ

Pourquoi .map is not a function sur des données d'API ?
L'API retourne souvent un objet { data: [...], meta: {...} }, pas un tableau directement. Fais response.data.map() au lieu de response.map(). Vérifie toujours la structure avec console.log(response).

Comment savoir si une variable est une fonction ?
Utilise typeof maVariable === 'function'. C'est la vérification la plus fiable avant d'appeler une variable comme fonction.

Cette erreur peut venir d'un package npm ?
Oui. Si un package est mal installé ou incompatible, ses exports peuvent être undefined. Vérifie la version du package et supprime node_modules/ puis relance npm install.

Voir aussi : Cannot read property of undefined et les 10 erreurs JavaScript des débutants.

Envie de pratiquer ? GoGoKodo propose des ateliers interactifs pour apprendre JavaScript en codant directement dans le navigateur — 100% gratuit.