Différence de Null et Undefined en JavaScript

J’ai appris le JavaScript depuis longtemps, mais je n’arrivais toujours pas à faire la différence entre null et Undefined. Cela peut paraître idiot, je sais. Alors, dans cet article, j’ai décidé d’approfondir les différences entre les deux.

Avant de commencer, nous devons comprendre les 7 types de données primitives :

• string
• number
• bigint
• boolean
• undefined
• null
• symbol

Et il y a 6 valeurs falsy connu en JavaScript (voir la liste complète), qui sont :

• Le mot clé false
• Nombre 0 and -0 (Also 0n and -0n )
• string vide, valeurs: “”, '' , ``
• null (l’absence de toute valeur)
• undefined
• NaN — not a number (n’est pas un nombre)

Comme on peut le voir, les termes null et undefined sont traités comme des falsy pour les opérations booléennes (true/false). Il y a quelque chose que j’aimerais discuter et qui est ajouté à l’ES2021 (ou ES12) qui est lié à la notion de null et undefined, que nous examinerons à la fin de cet article.

Explorons ensemble quelles sont les différences entre null et undefined !

Null

• Selon le MDN, le zéro représente l’absence intentionnelle de toute valeur d’objet.
• La valeur null doit être attribuée.
• Ce qui est intéressant avec null, c’est que null exprime l’absence d’identification, ce qui signifie que la variable ne pointe vers aucun objet.

Undefined

• Une variable à laquelle aucune valeur n’a été attribuée est considérée comme un type undefined.
• Une méthode ou un énoncé reviendrait undefined si la variable n’a pas de valeur assignée, donc sous forme de fonction.

Exemple de code :

Que se passe-t-il si j’ai attribué la variable snoopy à null ?

Si je console.log la variable, le terminal affichera null .

Par contre, si j’attribue snoopy à rien et console.log à cela :

Cela permettrait d’afficher à la console undefined.

Vous pouvez également assigner explicitement une variable à undefined, ce qui vous donnera le même résultat :

Note rapide : comme mentionné précédemment, null et undefined sont tous deux des valeurs primitives, mais il est intéressant de noter que si nous effectuons un test de typeof , ils nous donnent des résultats différents :

Toutes les autres valeurs en Javascript sont des objets ({}, [], fonctions…). On considère donc généralement qu’il s’agit d’une erreur lors de la création de Javascript. ¯\_(ツ)_/¯

Opérateurs de l’égalité (==) et de l’identité (===)

Je ne savais pas que c’était leur vrai nom haha alors que nous avons tellement l’habitude de les appeler « strictement » ou « vaguement » égaux les uns aux autres.

Lorsque nous vérifions null et undefined, il est assez intéressant de jeter un coup d’œil aux opérateurs d’égalité, car nous avons effectué une conversion de type (ou, dans un terme plus technique, type coercion) lorsque nous devions le faire.

null == undefined
// true

Cependant, null et undefined sont vaguement égaux l’un à l’autre (dans ce cas, je considérerais qu’il s’agit d’une fausse valeur, donc qu’ils sont vaguement égaux l’un à l’autre),

null === undefined
// false

null et undefined ne sont pas strictement égaux entre eux. J’estime que parce que les termes null et undefined ont des usages et des significations très différents, c’est la raison pour laquelle ils sont strictement inégaux l’un par rapport à l’autre.

Alors, disons les choses autrement

null !== undefined
// true

Par conséquent, lorsque null est fixée à une valeur strictement inégale ou undefined, cela nous rendrait true.

Concrètement, traduisons cela en une déclaration if (inspirée entièrement du MDN) :

Donc, si nous faisons

let woodstock; //undefined
if (woodstock === undefined) {
  // whatever statement here executes
} else {
  // this does not execute, since our variable is undefined, i.e. true
}

Plutôt cool, non ? Avec les paramètres par défaut dans une fonction, undefined utilisera le paramètre par défaut alors que null ne le fera pas.

Supposons que nous ayons une fonction peanuts .

let peanuts = (str = 'snoopy is the best') => {
  console.log(str);
}

Explication : Le code ci-dessus crée une fonction appelée peanuts. Cette fonction nécessite un paramètre de chaîne de caractères et elle fixe le paramètre par défaut à une chaîne de caractères ; snoopy est le meilleur (bien sûr.) s’il n’est pas fourni.

Par conséquent, si nous faisons

peanuts();
// snoopy is the best

peanuts('charlie brown sucks at baseball')
// charlie brown sucks at baseball

Si nous insérons le paramètre comme étant undefined, cela nous donnera la valeur par défaut et non avec null :

peanuts(undefined)
// snoopy is the best

peanuts(null)
// null

✨ Bonus Section – ES2021 Nouvelle caractéristique : La question est égale à (??=) ✨

Comme mentionné ci-dessus, nous allons explorer cette nouvelle fonctionnalité dans l’ES2021 (sortie prévue en juin 2021 ! !!) qui implique null et undefined que j’ai trouvé intéressante !

Avant d’entrer dans le vif du sujet de ??=, je dois expliquer en quelques mots ce qu’est le ??

Nullish Coalescing Operator(??)

Il existe une chose appelée opérateur coalescent null (??). Cela mérite un article à part, mais puisque nous parlons de l’opérateur null et undefined, je voudrais en parler brièvement. || est assez commun à beaucoup d’entre nous et nous l’avons probablement vu et utilisé à plusieurs reprises. Qu’en est-il de ?? Je veux dire que ce n’est pas commun pour moi.

La différence entre || et ??:

|| renvoie le côté droit si le côté gauche est une valeur fausse, pas seulement null ou undefined.

const snoopy = null || "is not a usual beagle"
console.log(snoopy)
// is not a usual beagle

const woodstock = "" || "is a bird that can't fly"
console.log(woodstock)
// is a bird that can't fly

?? renvoie le côté droit lorsque le côté gauche est soit null, soit undefined . Utilisons l’exemple ci-dessus à titre de comparaison :

const snoopy = null ?? "is not a usual beagle"
console.log(snoopy)
// "is not a usual beagle"

const woodstock = "" ?? "is a bird that can't fly"
console.log(woodstock)
// ""

Notez que "" est une fausse valeur dans JS, mais avec ?? cela renverrait "" (chaîne vide) de toute façon car elle n’est ni null ni undefined.

Très bien, entrons dans la vraie étoile ici, la question ⭐️ Question est égale à ??= ⭐️

Question Question égale ??=

Le nom pour cela : affectation logique de la valeur nulle (Logical Nullish Assignment)

Ce dernier fonctionne en fait de manière assez similaire au Nullish Coalescing Operator (??). Et si vous réfléchissez à la manière dont nous utilisons +=, *=, -= , /=, ce ??= fonctionne de manière assez similaire à ces opérateurs.

Si nous utilisons +=, cela ressemblera à ceci :

let a = 1;
console.log(a += 3); // 4
// same as: a = a + 3

??= est à peu près de même nature :

let snoopy = null; // sorry snoopy!!!
let woodstock = "is better";

snoopy ??= woodstock
// equivalent expression: snoopy ?? (snoopy = woodstock);
// snoopy will only be assigned to the woodstock variable if snoopy is null.

Si nous l’écrivons avec le code équivalent de la déclaration if avec la même variable :

if (snoopy === null || snoopy === undefined) {
  snoopy = woodstock;
}

Cet opérateur travaille de manière assez similaire à l’opérateur de coalescence nul (Nullish Coalescing Operator), qui ne vérifie que les valeurs null et undefined, mais pas les autres valeurs erronées.

Cet opérateur d’affectation logique n’est pas le seul nouvel opérateur d’affectation logique dans l’ES2021, il y a aussi &&= et ||=.

Yay ! Vous avez réussi à aller jusqu’au bout ! J’espère que cet article vous sera utile ! C’est toujours très excitant d’apprendre de nouvelles choses !