JavaScript - 7.6 Getters et setters en JavaScript : lire et écrire une propriété

Un objet peut contenir des propriétés et des méthodes. Un getter permet de lire une valeur calculée comme une propriété, et un setter permet de la modifier. Cette leçon part d'un objet personne et montre comment passer d'une méthode fullName à un getter et à un setter.

Le problème du nom complet

L'objet personne contient un prénom, Jean, et un nom de famille, Dupont. Pour afficher le nom complet, on peut concaténer les deux valeurs avec un modèle littéral, qui insère les valeurs directement dans la chaîne.

Si ce calcul apparaît à plusieurs endroits, il faut le répéter partout. Une meilleure solution consiste à le placer dans une méthode de l'objet, nommée fullName.

const person = {
  firstName: 'Jean',
  lastName: 'Dupont',
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};
console.log(person.fullName());

Transformer la méthode en getter

Depuis ES6, une méthode d'objet peut s'écrire sans le mot-clé function. En plaçant le mot-clé get devant son nom, la méthode devient un getter.

On accède alors à fullName comme à une propriété, sans parenthèses. Sans setter, la valeur ne peut pas être définie depuis l'extérieur de l'objet.

get fullName() {
  return `${this.firstName} ${this.lastName}`;
}

Écrire un setter

Un setter se déclare avec le mot-clé set. Il reçoit la valeur affectée en paramètre. Ici, le setter découpe cette valeur à chaque espace : le premier morceau devient le prénom, et le second le nom de famille. Le paramètre peut porter n'importe quel nom : la vidéo utilise value, qui désigne la valeur placée à droite de l'opérateur d'affectation.

Avec person.fullName = 'John Smith', les propriétés firstName et lastName sont mises à jour. Dans la console, un getter apparaît avec trois petits points : il faut cliquer dessus pour afficher sa valeur.

set fullName(value) {
  const parts = value.split(' ');
  this.firstName = parts[0];
  this.lastName = parts[1];
}

En résumé

Un getter permet de lire une valeur calculée comme une propriété. Un setter permet d'affecter une valeur et de mettre à jour d'autres propriétés. Ces deux méthodes rendent le code plus court et plus propre à lire.

Points clés

• Une méthode peut s'écrire sans le mot-clé function dans un objet.
• Le mot-clé get transforme une méthode en getter, lu comme une propriété.
• Le mot-clé set définit un setter, qui reçoit une valeur en paramètre.
• Un setter peut répartir une valeur entre plusieurs propriétés.
• Dans la console, un getter apparaît avec trois petits points.

Questions fréquentes

Pourquoi utiliser un getter plutôt qu'une méthode ?

Un getter s'appelle comme une propriété, sans parenthèses. Le code est plus lisible pour celui qui utilise l'objet.

Un getter sans setter peut-il être modifié ?

Non. Sans setter, la valeur ne peut pas être définie de l'extérieur. La vidéo montre que le nom complet est alors en lecture seule.

Que fait le setter avec la valeur reçue ?

Il la découpe à chaque espace. Le premier morceau va dans firstName, et le second dans lastName.