Comment fonctionnent les opérateurs d’assignation logique ES2021 en JavaScript

Depuis le lancement de la version ECMAScript 6, en 2015, le TC19 s’efforce d’apporter chaque année des fonctionnalités et des améliorations à JavaScript, après tout, il a fallu de nombreuses années d’attente avant l’apparition de l’ES6.

Bien sûr, les fonctionnalités qui sont approuvées ne le sont qu’en petit nombre, car le processus d’approbation d’une fonctionnalité est long et demande beaucoup de discussions et de tests avant d’être officialisé.

Comme on pouvait s’y attendre, la version ECMAScript est désormais là et apporte quelques améliorations plutôt sympas. Parmi elles figurent :

• Opérateurs d’affectation logique (Logical assignment operators);
• String.replaceAll();
• Promise.any();
• Parmi d’autres.

Dans cet article, je souhaite parler des opérateurs d’affectation logique. Dans d’autres articles, nous pourrons traiter des autres. C’est convenu ?

Si vous n’êtes pas encore familier avec ECMAScript 6 (et ses versions ultérieures), je vous recommande de jeter un œil à mon livre ECMAScript 6 — Entre dans le Futur de JavaScript et à mes cours ES6, ES7 et ES8 ! Je suis sûr que cela vous aidera ! 🙂

Opérateurs d’affectation logique

Ces nouveaux opérateurs ressemblent beaucoup à ceux auxquels nous sommes habitués, mais ils apportent quelques nouveautés très utiles, notamment pour attribuer des valeurs par défaut aux variables.

Ils sont au nombre de trois : OU, ET et Null.

Opérateur d’affectation logique OU

Cet opérateur est représenté par le symbole :

x ||= y

Cet opérateur fonctionne de la même manière que l’opération x || (x = y). Autrement dit, la variable y n’attribuera sa valeur à x que si elle est considérée comme fausse (falsy) dans le contexte booléen. Sinon, x conserve sa valeur d’origine.

Vous trouvez cela confus ? Je suis convaincu que l’exemple ci-dessous vous aidera à mieux saisir ce cas. Regardez :

const chave = () => {
  // fait une logique qui retourne une clé
  return "clé";
}// Exemple 1
const utilisateur = {nom: "Diego", âge: 29, clé:""};
utilisateur.chave ||= clé(); 
console.log(utilisateur.chave); // clé// Exemple 2
utilisateur.chave = "autre clé";
utilisateur.chave ||= clé();
console.log(utilisateur.chave); // autre clé

Notez que dans l’exemple 1, comme dans l’objet utilisateur la valeur de l’attribut clé est vide (représentée par des guillemets vides), la valeur obtenue est la chaîne renvoyée par la fonction. Dans l’exemple 2, cela ne se passe pas, car la valeur n’est plus fausse dans le contexte booléen.

Opérateur d’affectation logique ET

Cet opérateur est représenté par le symbole :

x &&= y

Cet opérateur agit totalement à l’opposé de l’opérateur d’affectation logique OU, c’est-à-dire que la valeur de la variable y sera attribuée à x si elle possède déjà une valeur vraie (truthy). Sinon, elle demeure avec la valeur qu’elle avait.

Voyons comment cela se produit en nous basant sur l’exemple précédent :

const chave = () => {
  // fait une logique qui retourne une clé
  return "clé";
}// Exemple 1
const utilisateur = {nom: "Diego", âge: 29, clé:""};
utilisateur.chave &&= clé(); 
console.log(utilisateur.chave); // // Exemple 2
utilisateur.chave = "autre clé";
utilisateur.chave &&= clé();
console.log(utilisateur.chave); // clé

Remarquez que les exemples 1 et 2 sont très clairs. Dans le premier, comme la valeur de l’attribut clé est vide, l’opérateur n’attribue rien. Dans le second, il attribue, car l’attribut clé possède désormais une valeur différente de faux (dans le contexte booléen).

Opérateur d’affectation logique Null

x ??= y

Cet opérateur est peut-être le plus facile à comprendre. La valeur de y sera attribuée à x si, et seulement si, elle vaut null ou undefined. Et en ce qui concerne JavaScript, rien de mieux qu’une méthode simple pour gérer ces valeurs, n’est-ce pas ?

Voyez l’exemple :

const chave = () => {
  // fait une logique qui retourne une clé
  return "clé";
}// Exemple 1
const utilisateur = {nom: "Diego", âge: 29, clé: null};
utilisateur.chave ??= clé(); 
console.log(utilisateur.chave); // clé// Exemple 2
utilisateur.chave = "autre clé";
utilisateur.chave ??= clé();
console.log(utilisateur.chave); // autre clé

Dans l’exemple 1, nous attribuons null comme valeur de l’attribut clé de l’objet utilisateur. Quand l’opérateur est invoqué, il remarque cette valeur et attribue alors la valeur renvoyée par la fonction clé.

Dans l’exemple 2, cela ne se produit pas car la valeur n’est plus null ou undefined.

Conclusion

JavaScript n’est pas aujourd’hui la langue laplus aimée du monde sans raison. Les petits progrès qui sont apportés chaque année font que le langage ne cesse d’évoluer, toutefois cela exige aussi que nous, développeurs et développeuses, continuions à nous mettre à jour pour connaître ces nouveautés et savoir comment les utiliser.

Vous pouvez tester cela sur le REPL Babel.