Détection des propriétés undefined en JavaScript | Guide complet

Introduction : pourquoi votre code plante avec l'erreur "undefined" ?

Vous écrivez du code, tout semble logique, mais soudain — TypeError: Cannot read properties of undefined. Ça vous dit quelque chose ? Cette erreur est un véritable cauchemar pour les débutants et un invité fréquent sur Stack Overflow. Le sujet "Detecting an undefined object property" a cumulé des milliers de vues, et ce n'est pas un hasard.

Les objets en JavaScript, c'est comme des boîtes à surprises. Vous ne savez jamais vraiment si la propriété dont vous avez besoin se trouve à l'intérieur, surtout si l'objet provient d'une API, d'une base de données ou d'un autre développeur. Aujourd'hui, nous allons devenir de véritables détectives et passer en revue toutes les méthodes pour attraper undefined en flagrant délit. Vous apprendrez la différence entre undefined et null, quand utiliser typeof et quand préférer hasOwnProperty, et comment le JavaScript moderne simplifie notre travail.

C'est parti ! 🚀

Qu'est-ce que undefined exactement ?

Avant de traquer undefined, comprenons de quoi il s'agit. En JavaScript, undefined est une valeur primitive automatiquement attribuée à une variable qui n'a pas de valeur définie. Mais avec les objets, c'est plus subtil.

Une propriété d'objet peut être undefined dans deux cas :

\n
• La propriété existe, mais sa valeur est explicitement définie à undefined.
\n
• La propriété n'existe tout simplement pas dans l'objet.
\n

Et c'est là que ça devient intéressant. Pour le code externe, ces deux cas semblent identiques : en essayant de lire une propriété inexistante, vous obtenez undefined. Mais pour votre logique, la différence peut être cruciale.

const user = {\n    name: 'Marie',\n    age: undefined, // la propriété existe, mais sa valeur est undefined\n    // city: n'est pas déclarée du tout\n};\n\nconsole.log(user.age);  // undefined\nconsole.log(user.city); // undefined

Les deux appels renvoient undefined, mais le premier parce que c'est défini ainsi, le second parce que la propriété n'existe pas. Comment faire la différence ? Lisez la suite.

Méthode 1 : L'opérateur typeof — la bonne vieille méthode

La façon la plus simple et la plus sûre de vérifier une propriété est d'utiliser typeof. Cet opérateur ne génère jamais d'erreur, même si vous accédez à une propriété inexistante.

const book = {\n    title: 'Le Maître et Marguerite',\n    author: 'Boulgakov'\n};\n\nif (typeof book.year !== 'undefined') {\n    console.log('Année de publication :', book.year);\n} else {\n    console.log('Propriété year introuvable');\n}\n// Résultat : Propriété year introuvable

Avantages : Sûr, fonctionne dans tous les navigateurs, ne nécessite pas de méthodes supplémentaires.

Inconvénients : Ne fait pas la distinction entre une propriété qui existe mais vaut undefined. Si book.year = undefined, typeof renverra quand même 'undefined'.

Quand utiliser typeof ?

Idéal pour une vérification rapide quand vous voulez simplement éviter une erreur, et que la différence subtile entre "propriété existe mais undefined" et "propriété inexistante" n'a pas d'importance. Particulièrement utile pour les variables globales.

Méthode 2 : L'opérateur in — le détecteur d'existence

L'opérateur in vérifie si une propriété existe dans un objet, y compris les propriétés héritées. Il renvoie true ou false selon que la propriété se trouve dans la chaîne de prototypes.

const car = {\n    brand: 'Tesla',\n    model: 'Model 3'\n};\n\nconsole.log('brand' in car); // true\nconsole.log('year' in car);  // false\nconsole.log('toString' in car); // true (hérité de Object.prototype)

Notez bien : in renvoie true même si la propriété vaut undefined :

const config = {\n    debug: undefined\n};\n\nconsole.log('debug' in config); // true — la propriété existe