Qu’est-ce que la coalescence de Nullish ?

par

Théorie et différences entre || et ? ? #

La coalescence nulle nous permet de spécifier une valeur de de secours pour lorsqu’une valeur est
null ou undefined.

Vous avez probablement écrit du code comme :

let employeeSalaryFromDb;
const salary = employeeSalaryFromDb || 1000;

Nous vérifions simplement si le employeeSalaryFromDb est truthysi c’est le cas
on court-circuite et on affecte cette valeur à la variable salaire.

Si employeeSalaryFromDb est falsy nous attribuons la valeur à la droite de la
|| à l’opérateur salary variable.

En typographie, vous pourriez faire :

let employeeSalaryFromDb;
const salary = employeeSalaryFromDb ?? 1000;

Dans ce cas, nous vérifions si employeeSalaryFromDb est null ou undefined – si
alors – nous attribuons la valeur à la droite de la ?? à l’opérateur salary
variable.

Dans tout autre cas – on court-circuite et on assigne la valeur de
employeeSalaryFromDb à la salary variable.

Vous pouvez voir comment le || et ?? sont légèrement différents.

Dans le cas de || – si nous avons falsy valeur à la gauche de l’opérateur –
alors la valeur à droite de l’opérateur est retournée.

Pour ?? – si nous avons un null ou undefined valeur à gauche de l’opérateur
la valeur à droite de l’opérateur est retournée. Ce qui ne
inclure falsy des valeurs comme '', NaN, 0etc.

  • || – if (falsy) {renvoyer la valeur à droite de l’opérateur}
  • || – if (truthy) {renvoyer la valeur truthy}

const b = 'hello' || 'world';
  • ?? – if (null || undefined) {renvoie la valeur à droite de l’opérateur}
let c;

console.log(c ?? 'hello');

const d = null;

console.log(d ?? 'hello');
  • ?? – if (falsy &&amp ; !(null || undefined)) {renvoie une valeur falsy}
const e = 0;

console.log(e ?? 'hello');
  • ?? – if (truthy) {renvoyer la valeur truthy}

console.log('hi' ?? 'world');

Fin #

Le site ?? est plus spécifique que l’opérateur || car il n’évalue que
évalue ce qui se trouve à droite si la valeur de gauche est null ou
undefined. Parfois, le || a un comportement involontaire pour 0 ou
NaN qui ne sont pas fiables. Vous pourriez donc avoir quelque chose comme :

const quantity = 0;

console.log(quantity || 'specify quantity');

L’opérateur correct pour ce travail est ??:

const quantity = 0;

console.log(quantity ?? 'specify quantity');

A compter du 26 février 2021, le ?? est supporté par environ 85,68%
des navigateurs – caniuse.com.

Laisser un commentaire