Qu’est-ce que le chaînage facultatif ?

par

Théorie et différences entre &&amp ; et ? #

Le chaînage optionnel est une syntaxe soignée qui nous permet de court-circuiter une expression
si nous rencontrons un null ou undefined valeur.

Vous avez probablement écrit du code comme :

const employeeName = employee && employee.name;

Nous vérifions simplement si le employee est truthySi c’est le cas, nous
accédons à son name propriété.

Donc si l’employé est une valeur véridique, comme une valeur non vide. string, un object,
arrayetc., nous attribuerions la valeur name à la propriété employeeName variable.

Si l’employé est un falsy valeur – comme null, undefined, 0, ''etc – puis
employeeName se verrait attribuer la valeur falsy et la partie après employee
ne serait pas évaluée.

En typographie, on pourrait faire :

const employeeName = employee?.name;

Dans le cas de l’écriture typographique, nous disons que si l’employé n’est pas null ou undefined
accéder à sa propriété name et affecter sa valeur à la propriété employeeName variable.

Dans le cas où l’employé est null ou undefined – arrêter immédiatement l’évaluation et
retourner undefined.

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

Dans le cas de && nous pourrions obtenir l’un des falsy retournée par l’expression
dans le cas de ?. nous ne pouvons obtenir que undefined si la valeur
précédant l’opérateur est null ou undefined.

Aussi le && est une vérification plus large qui couvre toutes les falsy par opposition à
contrairement à ?. qui ne couvre que null et undefined dans la vérification, donc :

  • && – if (falsy) {return falsy}
  • && – if (truthy) {renvoie l’évaluation complète de l’expression}
  • ?. – if (null || undefined) {renvoie undefined}
let c;

console.log(c?.test);

let d = null;

console.log(d?.test);
  • ?. – if (falsy &&amp ; !(null || undefined)) {renvoie l’évaluation complète de l’expression
    l’expression}
const e = '';

console.log(e?.concat('hello'));
  • ?. – if (truthy) {renvoyer l’évaluation complète de l’expression}

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

Si isArray ou string – accède à l’élément à l’index – sinon retourne undefined. #

Récupérer le premier élément du tableau si on a un tableau, sinon retourner
indéfini :

Avec un tableau valide :

const arr1 = ['hello'];

console.log(arr1?.[0]);

Sans tableau valide :

const notarr1 = '';

console.log(notarr1?.[0]);

Avec une chaîne de caractères véridique :

const notarr2 = 'hello';

console.log(notarr2?.[0]);

Avec une valeur booléenne vraie :

const notarr3 = true;

console.log(notarr3?.[0]);

Appeler l’expression si elle n’est pas nulle ou indéfinie #

N’appelez une fonction que si sa valeur n’est pas nulle ou indéfinie :

function maybeLog(logger?: (message: string) => void) {
  
  logger?.('Hello World!');
}


maybeLog();


maybeLog(message => console.log(message));

Fin #

L’élégant ?. nous aide à court-circuiter une expression si nous rencontrons null ou
undefined valeurs. Grâce à une syntaxe très compacte, nous pouvons accéder de manière conditionnelle aux éléments d’un objet ou d’un tableau et appeler des fonctions.
aux éléments d’un objet ou d’un tableau et appeler des fonctions.

A partir du 26 février 2021, la version ?. est soutenu par environ
85.66% des navigateurs –
caniuse.com.

Laisser un commentaire