Cannot Read Property of Undefined en JS : 7 Solutions

Tu as cette erreur dans la console : TypeError: Cannot read properties of undefined (reading 'xxx'). C'est l'erreur JavaScript la plus fréquente au monde. Elle signifie que tu essaies d'accéder à une propriété sur une valeur qui est undefined. Voici les 7 causes les plus courantes — et comment les corriger.

1. Objet non initialisé

Tu déclares une variable sans l'initialiser, puis tu accèdes à une de ses propriétés.

// ❌ user est undefined
let user;
console.log(user.name); // TypeError!

// ✅ Initialiser l'objet
let user = { name: 'Ali', age: 25 };
console.log(user.name); // 'Ali'

// ✅ Ou vérifier avant d'accéder
if (user) {
  console.log(user.name);
}

2. Élément DOM qui n'existe pas

querySelector retourne null si l'élément n'est pas trouvé. Et null.quelqueChose = crash.

// ❌ L'élément n'existe pas dans le HTML
const btn = document.querySelector('#mon-bouton');
btn.addEventListener('click', handler); // TypeError!

// ✅ Vérifier que l'élément existe
const btn = document.querySelector('#mon-bouton');
if (btn) {
  btn.addEventListener('click', handler);
}

// ✅ Ou placer le script après le HTML (defer)
<script src="app.js" defer></script>

C'est un piège classique quand on manipule le DOM en JavaScript.

3. Donnée asynchrone pas encore arrivée

Tu accèdes à une donnée avant que le fetch/promise ne soit résolu.

// ❌ data est undefined au premier rendu
const [data, setData] = useState();
return <p>{data.name}</p>; // TypeError!

// ✅ Vérifier ou donner une valeur par défaut
const [data, setData] = useState(null);
if (!data) return <p>Chargement...</p>;
return <p>{data.name}</p>;

// ✅ Optional chaining
return <p>{data?.name ?? 'Inconnu'}</p>;

Pour bien gérer l'asynchrone, consulte notre guide sur async/await et les Promises.

4. Faute de frappe dans le nom de propriété

JavaScript ne te prévient pas quand tu accèdes à une propriété qui n'existe pas — il retourne simplement undefined.

const user = { name: 'Ali', email: 'ali@mail.com' };

// ❌ Faute de frappe : 'emial' au lieu de 'email'
console.log(user.emial.toUpperCase()); // TypeError!
// user.emial = undefined, puis undefined.toUpperCase() = crash

// ✅ Vérifier les noms
console.log(user.email.toUpperCase()); // 'ALI@MAIL.COM'

Astuce : utilise TypeScript ou un linter pour détecter ces erreurs avant l'exécution.

5. Oublier le return dans map/find

.find() retourne undefined si aucun élément ne correspond. .map() retourne undefined pour chaque élément si tu oublies le return.

const users = [{ id: 1, name: 'Ali' }, { id: 2, name: 'Sara' }];

// ❌ find ne trouve rien → undefined
const user = users.find(u => u.id === 99);
console.log(user.name); // TypeError!

// ✅ Vérifier le résultat de find
const user = users.find(u => u.id === 99);
if (user) {
  console.log(user.name);
}

// ❌ Oublier return dans map (accolades sans return)
const names = users.map(u => { u.name }); // [undefined, undefined]

// ✅ Arrow function sans accolades = return implicite
const names = users.map(u => u.name); // ['Ali', 'Sara']

Pour maîtriser ces méthodes : guide map, filter, reduce.

6. Déstructurer un objet undefined

Tu déstructures un objet qui peut être undefined ou null.

// ❌ Si getUser() retourne undefined
const { name, email } = getUser(); // TypeError!

// ✅ Valeur par défaut
const { name, email } = getUser() || {};

// ✅ Ou avec le nullish coalescing
const { name, email } = getUser() ?? {};

// ✅ Dans les paramètres de fonction
function greet({ name } = {}) {
  console.log(`Salut ${name}`);
}

7. Accéder à un objet imbriqué profondément

Tu accèdes à a.b.c.d et un des maillons est undefined.

const response = {
  data: {
    user: null // L'API retourne null
  }
};

// ❌ user est null → crash
console.log(response.data.user.address.city); // TypeError!

// ✅ Optional chaining (?.)
console.log(response.data.user?.address?.city); // undefined (pas de crash)

// ✅ Avec une valeur par défaut
const city = response.data.user?.address?.city ?? 'Non renseignée';

L'optional chaining ?. est ton meilleur ami. Disponible dans tous les navigateurs modernes depuis 2020.

Comment debugger efficacement

Quand tu as cette erreur, voici les 3 réflexes :

1. Lire le message : Cannot read properties of undefined (reading 'name') → la variable AVANT .name est undefined
2. console.log juste avant : affiche la variable suspecte pour voir sa valeur réelle
3. Remonter la chaîne : si a.b.c crash, vérifie d'abord a, puis a.b, puis a.b.c

// Technique de debug : afficher chaque maillon
console.log('response:', response);
console.log('data:', response.data);
console.log('user:', response.data?.user);
// Tu trouveras lequel est undefined

Résumé en un tableau

FAQ

C'est quoi undefined en JavaScript ?
undefined signifie qu'une variable a été déclarée mais n'a pas reçu de valeur. C'est différent de null (valeur intentionnellement vide). Pour comprendre les bases : let, const et var expliqués.

Quelle différence entre undefined et null ?
undefined = pas de valeur assignée (JavaScript le met par défaut). null = valeur vide assignée volontairement par le développeur. Les deux provoquent la même erreur si tu accèdes à une propriété dessus.

Comment éviter cette erreur définitivement ?
Utilise TypeScript. Il détecte ces erreurs au moment de l'écriture du code, avant même l'exécution. Sinon, utilise systématiquement l'optional chaining (?.) et le nullish coalescing (??).

L'optional chaining marche sur tous les navigateurs ?
Oui, depuis 2020. Chrome 80+, Firefox 74+, Safari 13.1+, Edge 80+. Si tu utilises un bundler (Vite, Webpack), il transpile automatiquement pour les vieux navigateurs.

Pour éviter les erreurs JavaScript les plus courantes, consulte aussi les 10 erreurs que tous les débutants font.

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