Problème de comparaison avec undefined en JavaScript

Question

Petit souci avec la déclaration d'une variable et l'interprétation par JS :
let gareDepart = "Valenciennes";
let gareArrivee;
if (gareDepart != "" && gareArrivee != "") {
console.log("Le train va démarrer");
}
console.log(gareArrivee);
J'ai bien une variable déclarée mais pas définie pour gare d'arrivée, du coup je ne devrais pas avoir le train va démarrer et pourtant cela s'affiche quand même.
Pourquoi ?

Louis-Nicolas Leuillet · Accepted Answer

Alors, très bonne observation ! En fait, le souci vient de la façon dont JavaScript évalue undefined dans une comparaison avec != .
Quand tu fais gareArrivee != "" , tu compares undefined avec une chaîne vide. Et là, JavaScript te dit que oui, undefined est bien différent de "" (ce sont deux valeurs distinctes). Du coup, ta condition passe à true et le message s'affiche.
Pour ça tu peux directement tester la variable sans comparaison :
let gareDepart = "Valenciennes";
let gareArrivee;
if (gareDepart && gareArrivee) {
console.log("Le train va démarrer");
}
console.log(gareArrivee); // undefined

René Barousse · Answer

Oui, j’ai testé directement comme ça avant de te poser la question. Ce qui est « bizarre », c’est le fait qu’être « undefined », donc pas définie, ne soit pas considérée comme vide. Genre, je déclare mes variables en début de programme, j’oublie que je n’ai pas affecté une valeur et, quand plus loin je fais un test, ça ne marche pas, et dur dur pour aller chercher ça :p

Louis-Nicolas Leuillet · Answer

Alors oui, c'est un des pièges classiques de JavaScript ! En fait, undefined et "" sont vraiment deux concepts différents pour le langage : undefined signifie "cette variable existe mais n'a jamais reçu de valeur", alors que "" c'est "cette variable a reçu une valeur, et cette valeur est une chaîne vide" !
Du coup, pour éviter ce genre de souci, tu as plusieurs options. La plus simple, c'est de toujours initialiser tes variables avec une valeur par défaut :
let gareDepart = "Valenciennes";
let gareArrivee = ""; // Initialisée à vide plutôt que undefined
Ou alors, tu peux utiliser la comparaison directe comme on a vu, parce que if (gareArrivee) va retourner false pour undefined , null , "" , 0 et false . C'est souvent ce qu'on veut dans ce genre de cas. C'est une bonne habitude à prendre dès maintenant haha

Problème de comparaison avec undefined en JavaScript

Formation JavaScript (legacy)