Les opérateurs d’affectation logique en JS

Par Christophe Porteneuve • Publié le 1 juin 2022 • 2 min

Bienvenue dans notre douzième article de la série JS idiomatique. Aujourd’hui on continue sur les opérateurs récents avec les opérateurs d’affectation logique, qui permettent de simplifier certaines expressions courantes.

Tu préfères une vidéo ?

Si tu es du genre à préférer regarder que lire pour apprendre, on a pensé à toi :

Le monde d’avant

Alors qu’on dispose depuis toujours (héritage du C) des opérateurs d’affectation combinés pour les opérations mathématiques (+=, %=…) et bit-à-bit (&=, ^=…), on n’avait rien pour les opérations logiques (c’est-à-dire booléennes) :

function demo(user, { times } = {}) {
  // Variante A - n'affecte pas d'office, Old Skool™
  if (!user.name) {
    user.name = 'foo'
  }

  // Variante B - idem (mais PaBô™ 🤮)
  user.name || (user.name = 'foo')

  // Variante C - affecte d'office (donc trigger écrivain potentiel)
  user.name = user.name || 'foo'

  // N'oublions pas le ??, souvent plus pertinent…
  times = times ?? 10

  // …
}

La version courte

ES2021 a officialisé trois opérateurs d’affectation logique : &&=, ||= et ??=. On retrouvait déjà les deux premiers en Ruby, et leur absence en JS agaçait donc bien les Rubyistes (dont moi).

function demo(user, { times } = {}) {
  user.name ||= 'foo'
  times ??= 10

  // …
}

Ça court-circuite toujours !

Contrairement aux variantes mathématiques ou bit-à-bit, qui résultent toujours en une affectation (et donc le déclenchement d’un éventuel accesseur écrivain), ces opérateurs préservent la sémantique de court-circuit de l’opération logique associée.

En particulier, il n’y aura affectation que si l’opérande droit est évalué. C’est pratique si tu écris quelque part où ça a un effet de bord indésirable, comme une perte de focus (écriture dans innerHTML par exemple) ou d’état local.

Voici un petit exemple pour bien enfoncer le clou :

class SnowFlake {
  #tone = 'loud'

  get tone() {
    return this.#tone
  }

  set tone(level) {
    this.#tone = level
    console.warn('Comment ça je parle mal !?')
  }
}

const dude = new SnowFlake()
dude.tone ||= 'regular' // => ne logue rien, ne change rien
dude.tone ??= 'mellow' // => idem
dude.tone &&= 'soft' // => logue et change

(Si la syntaxe #tone te surprend, va donc voir la partie membres réellement privés de notre épisode ultra-complet sur les classes.

Quels moteurs JS ?

C’est officiel depuis ES2021, mais comme souvent la prise en charge native n’a pas attendu :

• Tous les navigateurs modernes depuis mi-2020
• Node 15+ (2020 aussi)

Et pour tout le reste, il y a Babel.

Ça t’a plu ? Ne manque pas la suite !

Il y a aussi encore plusieurs sujets merveilleux à venir dans cette série JS idiomatique.

Pour être sûr·e de ne rater aucun de nos tutos et articles, le mieux est encore de t’abonner à notre newsletter et à notre chaîne YouTube. Tu peux aussi nous suivre sur Twitter.

Et bien entendu, n’hésite pas à jeter un œil à nos formations ! Si explorer l’intégralité des recoins du langage t’intéresse, la ES Total notamment est faite pour toi !