javascript undefined

Quand on commence à approfondir ses connaissances en JavaScript, on fait de plus en plus attention aux détails de ce langage.
Si vous êtes en pleine courbe d'apprentissage en JavaScript, que vous connaissez bien ce langage, mais que vous n'êtes pas encore expert, cet article est fait pour vous et il éveillera certainement votre curiosité !

Quelles sont les différences entre les valeurs null, undefined ou encore, l'absence de valeur ? Comment on peut savoir si une variable est null ou undefined ? Comment fonctionne l'opérateur typeof ?
Passons tout cela au peigne fin pour en connaitre les détails.

Que fait if (var) { ... }

C'est une forme de condition que je déconseille puisqu'elle n'est pas explicite. En effet, sauf si on est expert JavaScript, et encore, on ne sait pas exactement quand est-ce que cette condition sera vraie ou quand est-ce qu'elle sera fausse.
En réalité, cette condition est vraie si var vaut une des valeurs ci-dessous :

• true
• non undefined
• non null
• non égale à 0
• ne vaut pas NaN
• n'est pas une chaine vide

D'ailleurs, il est possible qu'en fonction des navigateurs, le résultat puisse être différent.
Inutile donc d'aller plus loin dans les détails, vous ne devriez pas utiliser cette forme de condition dans vos codes. Vous devriez les remplacer par des conditions explicites comme :

if (typeof var !== 'undefined') { // Pour vérifier si la variable est bien définie
   // ...
}
if (var != null) { // Pour vérifier si la variable ne vaut pas null
   // ...
}
if (var !== false) { // Pour vérifier si la variable ne vaut pas false (ou true)
   // ...
}
if (typeof var !== 'undefined' && var != null) { // Pour vérifier si la variable n'est ni indéfinie, ni nulle
   // ...
}
// ...etc

Différence entre undefined et null

Y a-t-il une différence entre les deux ? Est-ce la même chose ?
Voyons voir tout cela.

undefined

Par défaut, une variable vaut undefined.
Attention, je dis bien undefined et non "undefined".
Lorsqu'une variable ne s'est pas vue attribuer de valeur et que vous lisez sa valeur, elle vous renverra undefined.
Exemple :

console.log(b) // undefined
console.log(typeof b) // "undefined"

b = "abc"
console.log(b) // "abc"
console.log(typeof b) // "string"

undefined est un Singleton. C'est un peu comme un objet. JavaScript l'a créé pour vous faciliter la vie. Vous pouvez y accéder en écrivant undefined qui référence ce Singleton, et non "undefined" qui est une chaine de caractères. Vous pouvez l'utiliser comme bon vous semble : le comparer, l'attribuer à une variable .etc :

console.log(b) // undefined
console.log(typeof b) // "undefined"
if (b == undefined) { console.log('b vaut undefined') } else { console.log('b ne vaut pas undefined') } // "b vaut undefined"

b = "abc"
console.log(b) // "abc"
console.log(typeof b) // "string"
if (b == undefined) { console.log('b vaut undefined') } else { console.log('b ne vaut pas undefined') } // "b ne vaut pas undefined"

b = undefined
if (b == undefined) { console.log('b vaut undefined') } else { console.log('b ne vaut pas undefined') } // "b vaut undefined"

Et oui, comme vous pouvez le voir sur l'exemple ci-dessus, vous pouvez même le réattribuer à une variable. Comme cela, ni vu ni connu, on ne peut pas savoir si la variable a déjà été définie ou non.

null

Et null dans tout ça ?
null est tout bêtement un autre objet, tout comme undefined, que JavaScript nous met à disposition.
Ce n'est donc pas la même chose que undefined
Par contre, comme undefined, vous pouvez l'utiliser comme bon vous semble : le comparer, l'attribuer à une variable .etc :

console.log(b) // undefined
console.log(typeof b) // "undefined"
if (b == undefined) { console.log('b vaut undefined') } else { console.log('b ne vaut pas undefined') } // "b vaut undefined"
if (b == null) { console.log('b vaut null') } else { console.log('b ne vaut pas null') } // "b ne vaut pas null"

b = "abc"
console.log(b) // "abc"
console.log(typeof b) // "string"
if (b == undefined) { console.log('b vaut undefined') } else { console.log('b ne vaut pas undefined') } // "b ne vaut pas undefined"
if (b == null) { console.log('b vaut null') } else { console.log('b ne vaut pas null') } // "b ne vaut pas null"

b = null
if (b == undefined) { console.log('b vaut undefined') } else { console.log('b ne vaut pas undefined') } // "b ne vaut pas undefined"
if (b == null) { console.log('b vaut null') } else { console.log('b ne vaut pas null') } // "b vaut null"

Différence entre undefined et "undefined"

Si vous avez bien suivi le paragraphe précédent, vous aurez compris que "undefined" n'est pas la même chose que undefined.
"undefined" est une simple chaine de caractères.
Alors que undefined est le Singleton qui nous permet d'attribuer une sorte de valeur indéfinie à une variable.
Mieux vaut un bout de code qu'une longue explication :

var b
console.log(b) // undefined
console.log(typeof b) // "undefined"

b = "undefined"
console.log(b) // "undefined"
console.log(typeof b) // "string"

b = undefined
console.log(b) // undefined
console.log(typeof b) // "undefined"

Comprendre l'opérateur typeof

Pour être sûr de parfaitement comprendre les exemples précédents, encore faut-il comprendre comment fonctionne l'opérateur typeof.
typeof est un opérateur très simple ! typeof renvoie simplement le type de l'objet que vous lui passez, sous forme d'une chaine de caractères.
Voyons ça plus clairement avec un bout de code :

console.log(typeof a) // "undefined"

var a
console.log(typeof a) // "undefined"

var a = "abc"
console.log(typeof a) // "string"

var a = 123
console.log(typeof a) // "number"

var a = [1, 2, 3]
console.log(typeof a) // "object" (Nous allons pas rentrer dans les détails dans cet article, mais un tableau est bel et bien un objet en JavaScript)

var a = { nom: 'Marcel', prenom: 'Galouste' }
console.log(typeof a) // "object"

Pour creuser un peu plus

Argument manquant, argument indéfini

Si vous définissez une fonction avec 3 arguments, mais que, quand vous appelez cette fonction, vous lui en passez 2 ou un seul, les arguments restants auront la valeur undefined. Exemple :

var maFonction = function (a, b, c) {
   if (typeof a === 'undefined') { console.log('a vaut undefined') }
   if (typeof b === 'undefined') { console.log('b vaut undefined') }
   if (typeof c === 'undefined') { console.log('c vaut undefined') }
}
maFonction('123', 'abc') // "c vaut undefined"

Cela s'avère pratique si vous souhaitez détecter l'absence d'un argument dans une fonction.

return manquant, return indéfini

Dans une fonction, si aucune instruction return n'est exécutée, alors la fonction renvoie undefined par défaut. Exemple :

var maFonction = function (a, b, c) {
   if (typeof a === 'undefined') { console.log('a vaut undefined') }
   if (typeof b === 'undefined') { console.log('b vaut undefined') }
   if (typeof c === 'undefined') { console.log('c vaut undefined') }
}
var monResultat = maFonction('123', 'abc', null)
console.log(typeof monResultat) // "undefined"

Et que se passe-t-il si j'utilise une variable qui n'a pas été définie ?

Cette fois-ci, on ne parle pas d'une variable qui n'a pas de valeur, mais d'une variable qui n'a même pas été définie. C'est-à-dire que l'opérateur var n'a même pas été utilisé pour déclarer la variable.
Dans ce cas, JavaScript lève une erreur de type ReferenceError. Exemple :

var b
console.log(b) // undefined
console.log(typeof b) // "undefined"
// b a été déclarée, donc elle est undefined

// essayons avec la variable abc qui n'a jamais été définie :
console.log(abc) // Une erreur est levée avec le message : ReferenceError: abc is not defined
console.log(typeof abc) // "undefined"

Petite subtilité, comme vous pouvez le voir, l'opérateur typeof ne lève pas d'erreur sur une variable qui n'existe pas, mais renvoie "undefined" à la place.

Comparer avec typeof ou undefined ?

Mais alors, pour savoir si une variable est undefined, il faut utiliser if (var == undefined) { ... } ou if (tyepof var === "undefined") { ... } ?
Si vous avez bien suivi, on peut utiliser les deux !
La seule petite différence est que la condition if (tyepof var === "undefined") { ... } sera vraie pour une variable qui n'existe pas alors que pour la condition if (var == undefined) { ... }, JavaScript lèvera une erreur si la variable n'existe pas.

Bonus

Et si on testait maintenant vos nouvelles compétences JavaScript ?
Attention, je ne parle pas de chaine de caractères ou de float, mais bien de détails un peu plus précis sur le fonctionnement de JavaScript tel que typeof, undefined, null...
A vous de jouer ! C'est par ici : http://perfectionkills.com/javascript-quiz/.
Bien entendu, ce cours ne couvre pas toutes les compétences demandées par ce quizz.
N'hésitez pas à partager votre score dans les commentaires, c'est gratuit et anonyme ! Ça permet de se situer et de se sentir moins seul.
Pour ma part, je n'ai pas eu la réponse à toutes les questions, mais je pensais au moins avoir la moyenne. J'ai finalement eu en dessous de la moyenne !
Ça permet de se rappeler que l'on a jamais terminé d'apprendre un langage !

Pour aller plus loin

Si vous souhaitez aller plus loin dans les entrailles du fonctionnement de JavaScript, voici quelques pistes de sujets complémentaires :

• Le "strict mode"
• Les fermetures/closures : la documentation de Mozilla est très ludique à ce sujet : https://developer.mozilla.org/fr/docs/Web/JavaScript/Closures
• L'opérateur with qui n'est plus utilisé de nos jours mais qui permet de comprendre certaines bases de JavaScript
• La suppression d'une variable ou d'une propriété en JavaScript : https://stackoverflow.com/questions/1596782/how-to-unset-a-javascript-variable