Typescript (et JavaScript) a deux valeurs spéciales pour exprimer la nullité : null et undefined. Les deux représentent l'absence de toute valeur.

Mais pourquoi avoir 2 valeurs différentes pour exprimer l'absence de valeur ?

C'est ce que nous allons explorer dans cet article.

La différence entre undefined et null

La valeur undefined signifie que la valeur n'est pas affectée. Cela signifie qu'une variable a été déclarée mais n'a pas encore reçu de valeur. undefined est donc nécessairement une valeur acceptée pour des variables de n'importe quel type.

La valeur null indique que vous savez que le champ n'a pas de valeur, c'est une absence intentionnelle de valeur. On affecte null à une variable. null n'est généralement pas une valeur autorisée pour les variables typées.

Dans quel cas une variable est undefined ou null ?

undefined

Chaque fois que vous déclarez une variable sans l'initialiser avec une valeur, JavaScript l'initialise à la valeur undefined.

L'exemple suivant déclare la variable myVar. Nous ne lui avons donné aucune valeur initiale. Par défaut, elle prend donc la valeur undefined. Mais pour null, nous devons explicitement lui attribuer la valeur.

1
2
3
4
5
let myVar: any;              
console.log(myVar);         // undefined
 
myVar = null;               // Affectation de la valeur null 
console.log(myVar);         // Affiche 'null'

Voici quelques-uns des cas où une variable obtient automatiquement la valeur undefined :

• Variable non initialisée
• Argument de fonction facultatif qui n'a pas été fourni
• Propriétée d'objet inexistante
• Éléments de tableau inexistants

null

JavaScript n'attribuera jamais automatiquement null à aucune variable.

null doit être utilisé dans tous les cas où l'affectation est réalisée par le développeur. Ainsi, undefined ne représente que les cas où la variable n'a jamais eu de valeur.

Par exemple :

1
2
3
4
5
6
7
function findBob(names: string[]): string | null {
    const bob = names.find('Bob');
    if (bob) {
        return bob;
    }
    return null;
}

Dans cet exemple, on renvoie la valeur null et non undefined. Car la valeur est intentionnellement nulle. On ne renvoie pas une variable non initialisée mais bien null pour signifier que Bob n'est pas dans la liste.

L'avantage est que le code qui utilisera un appel à cette fonction sera incité à prévoir le cas où null sera renvoyé.

On utilise null également pour supprimer une valeur, au lieu d'affecter undefined.

Les types undefined et null

Les valeurs undefined & null ont des types de donnée correspondants, nommés avec le même nom que la valeur . Le type de données de undefined est undefined et celui de null est null.

1
2
3
4
5
let a: undefined;         // a est une variable de type undefined
let b: null = null;       // b est une variable de type null
 
console.log(typeof(a));   // undefined
console.log(typeof(b));   // object

Vous pouvez vous demander pourquoi l'opérateur typeof renvoie 'object' pour une valeur nulle. Il s'agit en fait d'une erreur dans l'implémentation JavaScript d'origine, qui a ensuite été gardée pour éviter les régressions. Logiquement le type de null devrait être null.

Aujourd'hui, il est rationalisé que null est considéré comme un espace réservé pour un objet, même si, techniquement, il s'agit d'une valeur primitive.

Affectations de valeures nulles

À une variable typée

Si vous typez une variable comme étant un number (par exemple), vous ne pourrez pas lui affecter la valeur null. Mais elle pourra prendre la valeur undefined.

1
2
3
4
let myVar: number;             
console.log(myVar);         // La valeur est : undefined
 
myVar = null;               // TypeError: Type 'null' is not assignable to type 'number'.

Si l'on voulait autoriser myVar à prendre la valeur null, il faudrait la typer ainsi :

1
2
3
4
5
let myVar: number | null;             
console.log(myVar);         // La valeur est : undefined
 
myVar = null;
console.log(myVar);         // Affiche 'null'

À une variable typée undefined

La seule valeur que vous pouvez affecter à une variable undefined est undefined. Vous pouvez attribuer null uniquement si l'option StrictNullCheck est désactivée dans votre configuration TypeScript.

Toutes les autres valeurs telles que chaîne, objet, nombres, etc. ne sont pas autorisées.

1
2
3
4
5
6
7
8
9
10
11
let uVar: undefined;
 
// Autorisé
uVar = undefined;     // Ok
 
// Autorisé seulement si StrictNullCheck est désactivé
uVar = null;          // TypeError: Type 'null' is not assignable to type 'undefined'
 
// Non autorisé
uVar = 10;            // 10 is not assignable to type 'undefined'
uVar = {};            // {} is not assignable to type 'undefined'

À une variable typée null

Dans le cas d'une variable typée null, la seule valeur que vous pouvez lui attribuer est null. Vous pouvez également attribuer undefined si StrictNullCheck est désactivée.

1
2
3
4
5
6
7
8
9
10
11
let nVar: null;
 
// Autorisé
nVar = null;        // Ok
 
// Autorisé seulement si StrictNullCheck est désactivé
nVar = undefined;   // Type 'null' is not assignable to type 'null'.
 
// Non autorisé
nVar = 10;          // Type '10' is not assignable to type 'null'
nVar = {};           // Type '{}' is not assignable to type 'null'

Valeur fausse (falsy value)

null & undefined sont des valeurs fausses (falsy value) en JavaScript. C'est-à-dire que lorsque vous les utilisez dans une expression booléenne, ils sont équivalents à false.

1
2
3
4
5
let a = undefined;
let b = null;

if (!a) console.log('false');        // Affiche 'false'
if (!b) console.log('false');        // Affiche 'false'

Opérateurs de comparaison entre null et undefined

La comparaison de null avec des résultats indéfinis donne des résultats différents selon que vous utilisez un vérificateur d'égalité == ou un vérificateur d'égalité strict ===.

null et undefined ne représentent aucune valeur, donc le vérificateur d'égalité == renvoie true. C'est parce que le vérificateur d'égalité ne vérifie pas le type de données.

1
2
console.log(null == undefined);      // true
console.log(null === undefined);     // false

Tous les autres opérateurs de comparaisons renverront false.

1
2
3
4
console.log(null > undefined);      // false
console.log(undefined > null);      // false
console.log(null >= undefined);     // false
etc.

Conclusion

J'espère que cet article vous a aidé à bien comprendre les différences subtiles entre null et undefined.

N'hésitez pas à laisser un commentaire si vous avez une question ou une remarque !

Sources

• Documentation TypeScript : TypeScript null et undefined
• TekTutorialsHub : Null Vs Undefined in TypeScript