Getters et Setters en JavaScript

La plupart des propriétés d'objets en JavaScript sont des propriétés de données — elles stockent simplement une valeur. Mais les objets supportent également les propriétés accesseurs : des propriétés soutenues par des fonctions qui s'exécutent chaque fois que la propriété est lue ou écrite. Ces fonctions sont appelées getters et setters. Aux yeux du monde extérieur, une propriété accesseur ressemble à une propriété ordinaire (user.age), mais en coulisses c'est votre propre code qui décide de ce que sa lecture ou son affectation fait réellement.

Ce guide couvre la syntaxe get/set, comment les propriétés accesseurs diffèrent des propriétés de données, les cas d'utilisation les plus courants (validation et valeurs calculées), le fonctionnement des getters et setters dans les classes, ainsi que les pièges à connaître.

Introduction aux Getters et Setters de propriétés

Un getter est une fonction qui s'exécute lorsque vous lisez une propriété ; sa valeur de retour devient la valeur de l'accès. Un setter est une fonction qui s'exécute lorsque vous affectez une propriété ; il reçoit la valeur affectée comme seul argument. Parce que ce sont des fonctions, elles peuvent effectuer une validation, calculer un résultat à la volée, journaliser les accès ou mettre à jour d'autres propriétés — tout en utilisant une syntaxe de propriété ordinaire côté appelant.

Syntaxe

Dans un littéral d'objet, définissez un getter avec le mot-clé get suivi d'une méthode, et un setter avec le mot-clé set suivi d'une méthode qui prend un paramètre :

let obj = {
  get propName() {
    // getter, the code executed when obj.propName is read
  },
  set propName(value) {
    // setter, the code executed when obj.propName is written
  }
};

Vous pouvez définir les deux, ou un seul. Une propriété avec seulement un getter est en lecture seule ; lui affecter une valeur ne fait rien silencieusement en mode non-strict et lève une TypeError en mode strict. Une propriété avec seulement un setter est en écriture seule — la lire retourne undefined.

Propriétés accesseurs vs. propriétés de données

Il est utile d'être précis sur le type de propriété que crée un getter/setter. Une propriété ordinaire comme width: 5 est une propriété de données avec une value. Une paire getter/setter crée à la place une propriété accesseur qui n'a pas de value propre — seulement des fonctions get et set. Les deux sont mutuellement exclusifs : un seul descripteur de propriété ne peut pas avoir à la fois une value et un get/set.

C'est pourquoi les exemples de validation ci-dessous conservent le nombre réel dans un champ de support séparé (_age) : l'accesseur public age a besoin d'un endroit pour stocker les données, car il n'a pas de slot de valeur propre. Pour inspecter cela directement, voir Attributs et descripteurs de propriétés.

Pourquoi utiliser les Getters et Setters ?

Les getters et setters offrent plusieurs avantages, notamment :

• Encapsulation : Ils masquent la représentation interne derrière une interface publique stable. Vous pouvez ensuite changer la façon dont une valeur est stockée sans casser le code qui la lit.
• Validation : Vous pouvez rejeter ou normaliser des valeurs dans le setter avant qu'elles soient stockées.
• Propriétés calculées : Un getter peut dériver son résultat d'autres propriétés, de sorte que la valeur est toujours à jour et jamais stockée de manière obsolète.
• Compatibilité ascendante : Si une propriété qui était un champ ordinaire a besoin d'une logique ajoutée ultérieurement, vous pouvez la remplacer par un accesseur du même nom — le code appelant ne change pas.

Exemples pratiques

Plongeons dans quelques exemples pratiques pour illustrer comment les getters et setters peuvent être utilisés dans des scénarios du monde réel.

Exemple 1 : Objet utilisateur avec validation d'âge

Considérons un objet utilisateur où nous voulons nous assurer que la propriété age est toujours dans une plage raisonnable. Le setter valide l'entrée ; le getter retourne simplement le champ de support.

Exemple 2 : Créer des propriétés calculées

Les getters nous permettent de créer des propriétés calculées à la volée en fonction d'autres données. Chaque fois que area est lue, elle est recalculée, ce qui la maintient synchronisée si width ou height changent.

Exemple 3 : Définir des accesseurs avec Object.defineProperty

La syntaxe littérale get/set est la façon la plus courante de déclarer des accesseurs, mais vous pouvez également les ajouter à un objet existant — y compris après sa création — avec Object.defineProperty. C'est pratique lorsque le nom de la propriété est dynamique ou lorsque vous voulez contrôler des attributs comme enumerable.

Bonnes pratiques

Lorsque vous utilisez des getters et setters, tenez compte des bonnes pratiques suivantes pour vous assurer que votre code est propre, maintenable et efficace :

• Évitez les effets de bord dans les getters : Les getters doivent être rapides et sans effets de bord, car ils sont souvent appelés implicitement par le moteur ou lors de l'énumération des propriétés.
• Validation : Validez toujours les données dans les setters pour empêcher le stockage de données invalides ou nuisibles.
• Conventions de nommage : Utilisez un underscore initial (_) pour les noms de champs de support afin d'indiquer qu'ils sont privés.
• Sérialisation JSON : Notez que JSON.stringify() ignore les getters par défaut. Utilisez une fonction de remplacement ou une sérialisation explicite si vous avez besoin d'inclure des valeurs calculées.

Cas d'utilisation avancés

Noms de propriétés dynamiques

JavaScript ES6 a introduit les noms de propriétés calculées, qui peuvent être combinés avec des getters et setters pour définir dynamiquement des clés accesseurs basées sur des variables ou des expressions.

Intégration avec les classes

Les getters et setters sont également très utiles dans la programmation orientée classes, offrant un moyen d'encapsuler et de contrôler l'accès aux propriétés de classe. La syntaxe est identique — il suffit d'écrire des méthodes get/set dans le corps de la classe — et elles sont placées sur le prototype, de sorte que chaque instance les partage.

Pièges courants

Quelques erreurs surprennent les développeurs :

• Récursion infinie due à un mauvais champ de support. Si un setter pour name affecte this.name au lieu d'un champ séparé comme this._name, l'affectation déclenche à nouveau le setter, indéfiniment. Stockez toujours la valeur sous une clé différente.
• Un getter sans setter est en lecture seule. L'affecter ne fait rien (ou lève une erreur en mode strict), ce qui peut ressembler à un bug silencieux.
• JSON.stringify() appelle les getters mais ignore les setters. Un getter calculé est sérialisé (sa valeur de retour est incluse), mais il n'y a aucun moyen de le restaurer via un setter sur JSON.parse() — vous récupérez seulement des données brutes.
• this suit le site d'appel. À l'intérieur d'un getter ou d'un setter, this est l'objet sur lequel la propriété a été accédée. Si vous copiez l'accesseur sur un autre objet, this change en conséquence — voir Méthodes d'objets et "this".

L'exemple ci-dessous montre le piège de la récursion et sa correction :

Conclusion

Maîtriser les getters et setters de propriétés est une étape cruciale pour devenir un développeur JavaScript accompli. Ces fonctionnalités améliorent non seulement la fonctionnalité et la sécurité de votre code, mais ouvrent également la voie à des bases de code plus lisibles et maintenables. En suivant les bonnes pratiques et les exemples fournis dans ce guide, les développeurs peuvent utiliser efficacement les getters et setters à leur avantage, menant à des applications JavaScript plus robustes et efficaces.

Pratique