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.