
Null vs Undefined en JavaScript
Les valeurs null
et undefined
en Javascript semblent être très similaires, et pourtant, nous allons voir que chacune d’elle a des comportements particuliers et que leurs cas d’usages sont différents.
La valeur undefined
En Javascript, une variable a pour valeur undefined
lorsqu’elle n’est pas définie, c’est-à-dire qu’aucune valeur ne lui a été assignée.
Par exemple :
const value
console.log(value) //undefined
On peut aussi définir explicitement une variable comme non définie.
const value = undefined
La valeur undefined
devrait être utilisée uniquement lorsqu’on ne connaît pas l’état de la valeur attendue.
La valeur null
L’utilisation de null
en Javascript doit être explicite, c’est-à-dire qu’il faut clairement la définir.
const value = null
A la différence de undefined
, la valeur null
exprime le fait que nous savons que notre variable est « vide » et ne possède pas de valeur.
Les différences entres les valeurs null
et undefined
en Javascript
Les types
Une des premières différences notables entre null
et undefined
et le type de chacune de ces valeurs.
console.log(typeof undefined) //undefined
console.log(typeof null) // object
Les opérations arithmétiques
En réalisant des opérations arithmétiques, on remarque aussi une différence entre ces deux valeurs. En effet, null
est convertie en valeur 0 alors que undefined
prendra la valeur NaN
(Not a number).
undefined + 1 //NaN
null + 1 //1
D’ailleurs, on peut simplement vérifier que c’est undefined
qui rend le résultat de notre opération égal à NaN
en convertissant undefined
.
Number(undefined) //NaN
La comparaison
Nous allons maintenant effectuer des comparaisons entre ces deux valeurs avec les opérateurs classiques et strictes de Javascript.
null == undefined //true
null === undefined //false
Dans le cas de l’opération égale classique, Javascript vérifie seulement les valeurs. Ici, null
et undefined
sont des valeurs de type falsy (valeur de type fausse) et sont donc considérées comme identiques.
Dans la deuxième opération avec l’opérateur stricte, Javascript vérifie la valeur ainsi que le type de chacune des deux parties. Même si la valeur est identique, le type est en revanche différent comme nous l’avons vu plus haut.
Mais alors, pourquoi on confonds ces deux valeurs ?
Les similitudes entre null
et undefined
Falsy
Tel que vu précédemment, null
et undefined
sont des valeurs de type falsy.
Les valeurs falsy sont des valeurs évaluées comme false
lorsqu’elles sont converties en boolean
.
On en compte six en Javascript :
null
undefined
0
""
false
NaN
Valeurs primitives
On peut aussi noter que les valeurs null
et undefined
sont des valeurs primitives en Javascript.
Conclusion
Bien que null
et undefined
semblent être très similaires dans leur utilisation, nous avons pu voir que ces deux valeurs ont des comportements assez différents. L’utilisation d’une de ces valeurs plutôt que l’autre doit être réfléchi en fonction de la situation.
undefined
est une valeur indéfinie. On l’utilisera par exemple pour une variable qui attend le retour d’un requête HTTP tandis que null
définie une variable dont on sait explicitement qu’elle est vide. On l’utilisera par exemple pour le résultat de notre requête HTTP qui aurait échoué.
Cas concret
En Typescript, voici l’exemple précédent mis en application.
let response: undefined | Response | null = undefined
axios.get('...').then(response: Response => {
response = response
}).catch(error: Error => {
response = null
})
Dans cet exemple, on observe que notre variable response
est définie comme undefined
. On remarque aussi qu’elle peut prendre comme type null
ou Response
.
Puis nous réalisons notre requête Http. Dans le cas où notre requête réussie, notre variable sera de type Response
. Dans le cas où elle échoue, notre variable prendra la valeur null
.
Dans cet exemple, on comprend bien la différence entre undefined
et null
. Tant que notre requête n’est pas exécutée, on ne connaît pas la réponse et notre variable n’est donc pas définie. Une fois que l’on a le résultat, on peut explicitement dire que c’est un type défini (Response
) ou tout simplement null
.