Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Gestion des Propriétés avec Accesseurs et Mutateurs | Maîtrise des Classes et de l'Héritage en JavaScript
Maîtrise Avancée de JavaScript

bookGestion des Propriétés avec Accesseurs et Mutateurs

Les accesseurs (getters) et mutateurs (setters) offrent un moyen puissant de contrôler l'accès aux propriétés d'un objet en JavaScript.

Que sont les getters et setters ?

En JavaScript, les getters et setters sont des méthodes spéciales permettant un accès contrôlé aux propriétés d'un objet. Ils offrent la flexibilité de définir comment une propriété est récupérée et modifiée, tout en protégeant l'état interne de l'objet.

  • Getter : Méthode utilisée pour obtenir (get) la valeur d'une propriété ;
  • Setter : Méthode utilisée pour définir ou mettre à jour la valeur d'une propriété.

Considérez un coffre-fort bancaire. Le coffre contient des objets de valeur (propriétés privées), et le guichetier (getter/setter) agit comme gardien. L'accès direct au coffre n'est pas possible, mais le guichetier peut récupérer ou modifier des objets pour vous selon certaines règles et validations.

Comment définir et utiliser les getters et setters

Les getters et setters sont définis à l'aide des mots-clés get et set à l'intérieur d'une classe. Lorsqu'une propriété est consultée, le getter est automatiquement invoqué. De même, lors de la modification d'une propriété, le setter est appelé au lieu de modifier directement la propriété.


              
12345678910111213141516171819202122232425262728293031323334

            
class Animal {
  #type; // Private field

  constructor(name, type) {
    this.name = name;
    this.#type = type; // Assigning the private field
  }

  // Getter for the type property
  get type() {
    return this.#type;
  }

  // Setter for the type property
  set type(newType) {
    if (newType) {
      this.#type = newType;
    } else {
      console.log('Invalid type');
    }
  }
}

const lion = new Animal('Lion', 'Wild');

// Using getter to access the private type
console.log(lion.type); // Output: Wild

// Using setter to modify the private type
lion.type = 'Domestic';
console.log(lion.type); // Output: Domestic

// Trying to set an invalid value
lion.type = ''; // Output: Invalid type
copy

Dans cet exemple, #type est une propriété privée, et nous définissons un accesseur (get type()) pour récupérer sa valeur ainsi qu'un mutateur (set type(newType)) pour la modifier. Le mutateur inclut une validation afin d'empêcher l'attribution d'une valeur invalide, illustrant ainsi comment contrôler les mises à jour des données privées.

Avantages des accesseurs et mutateurs

Accès contrôlé

  • Les accesseurs (getters) permettent de définir la manière dont la valeur d'une propriété est obtenue, offrant la possibilité de traiter ou de manipuler la valeur avant de la retourner ;
  • Les mutateurs (setters) offrent un contrôle sur la mise à jour d'une propriété, permettant de valider ou de transformer les données avant de les affecter à un champ privé.

Protection des données

  • L'utilisation des getters et setters contribue à protéger l'état interne d'un objet en fournissant une interface contrôlée pour l'interaction ;
  • Les propriétés privées peuvent rester cachées, et seules les informations nécessaires peuvent être exposées au code externe.

Flexibilité

Les getters et setters permettent d'ajouter une logique supplémentaire—comme la validation ou la journalisation—lors de l'accès ou de la modification des propriétés, sans modifier la manière dont le code externe interagit avec l'objet.

Exemple : Compte utilisateur avec validation du mot de passe

Supposons que vous gériez des comptes utilisateurs où les mots de passe doivent respecter certaines normes de sécurité. À l'aide d'un setter, il est possible d'imposer la robustesse du mot de passe, tandis qu'un getter peut récupérer une version masquée du mot de passe à des fins d'affichage.


              
12345678910111213141516171819202122232425262728293031323334

            
class UserAccount {
  #password; // Private field

  constructor(username, password) {
    this.username = username;
    this.#password = password;
  }

  // Getter for password (returning a masked version)
  get password() {
    return '*'.repeat(this.#password.length); // Mask the password when retrieved
  }

  // Setter for password with validation
  set password(newPassword) {
    if (newPassword.length >= 8) {
      this.#password = newPassword;
    } else {
      console.log('Password must be at least 8 characters long');
    }
  }
}

const user = new UserAccount('nick_feather', 'secret123');

// Accessing the password using the getter (masked)
console.log(user.password); // Output: *********

// Setting a new valid password using the setter
user.password = 'strongPassword123';
console.log(user.password); // Output: ***************

// Trying to set an invalid password
user.password = '123'; // Output: Password must be at least 8 characters long
copy

Dans cet exemple, l'accesseur (getter) retourne une version masquée du mot de passe afin de dissimuler la valeur réelle, et le mutateur (setter) applique une validation, garantissant que le mot de passe comporte au moins 8 caractères.

Exemple avec logique de validation utilisant les accesseurs et mutateurs

Voici un autre exemple où l'on gère l'âge d'une personne et où l'on s'assure que la valeur reste dans une plage raisonnable :


              
12345678910111213141516171819202122232425262728293031323334

            
class Person {
  #age; // Private field

  constructor(name, age) {
    this.name = name;
    this.#age = age;
  }

  // Getter for age
  get age() {
    return this.#age;
  }

  // Setter for age with validation
  set age(newAge) {
    if (newAge > 0 && newAge < 120) {
      this.#age = newAge;
    } else {
      console.log('Invalid age');
    }
  }
}

const peter = new Person('Peter', 30);

// Accessing the age using the getter
console.log(peter.age); // Output: 30

// Setting a new valid age using the setter
peter.age = 35;
console.log(peter.age); // Output: 35

// Trying to set an invalid age
peter.age = 150; // Output: Invalid age
copy

Cet exemple illustre comment un setter peut garantir qu’un âge reste dans une plage valide, empêchant ainsi l’enregistrement de données invalides.

1. Quel est l’objectif principal de l’utilisation des getters ?

2. Dans le code suivant, quelle sera la sortie de console.log(user.password); ?

question mark

Quel est l’objectif principal de l’utilisation des getters ?

Select the correct answer

question mark

Dans le code suivant, quelle sera la sortie de console.log(user.password); ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 9

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.22

bookGestion des Propriétés avec Accesseurs et Mutateurs

Glissez pour afficher le menu

Les accesseurs (getters) et mutateurs (setters) offrent un moyen puissant de contrôler l'accès aux propriétés d'un objet en JavaScript.

Que sont les getters et setters ?

En JavaScript, les getters et setters sont des méthodes spéciales permettant un accès contrôlé aux propriétés d'un objet. Ils offrent la flexibilité de définir comment une propriété est récupérée et modifiée, tout en protégeant l'état interne de l'objet.

  • Getter : Méthode utilisée pour obtenir (get) la valeur d'une propriété ;
  • Setter : Méthode utilisée pour définir ou mettre à jour la valeur d'une propriété.

Considérez un coffre-fort bancaire. Le coffre contient des objets de valeur (propriétés privées), et le guichetier (getter/setter) agit comme gardien. L'accès direct au coffre n'est pas possible, mais le guichetier peut récupérer ou modifier des objets pour vous selon certaines règles et validations.

Comment définir et utiliser les getters et setters

Les getters et setters sont définis à l'aide des mots-clés get et set à l'intérieur d'une classe. Lorsqu'une propriété est consultée, le getter est automatiquement invoqué. De même, lors de la modification d'une propriété, le setter est appelé au lieu de modifier directement la propriété.


              
12345678910111213141516171819202122232425262728293031323334

            
class Animal {
  #type; // Private field

  constructor(name, type) {
    this.name = name;
    this.#type = type; // Assigning the private field
  }

  // Getter for the type property
  get type() {
    return this.#type;
  }

  // Setter for the type property
  set type(newType) {
    if (newType) {
      this.#type = newType;
    } else {
      console.log('Invalid type');
    }
  }
}

const lion = new Animal('Lion', 'Wild');

// Using getter to access the private type
console.log(lion.type); // Output: Wild

// Using setter to modify the private type
lion.type = 'Domestic';
console.log(lion.type); // Output: Domestic

// Trying to set an invalid value
lion.type = ''; // Output: Invalid type
copy

Dans cet exemple, #type est une propriété privée, et nous définissons un accesseur (get type()) pour récupérer sa valeur ainsi qu'un mutateur (set type(newType)) pour la modifier. Le mutateur inclut une validation afin d'empêcher l'attribution d'une valeur invalide, illustrant ainsi comment contrôler les mises à jour des données privées.

Avantages des accesseurs et mutateurs

Accès contrôlé

  • Les accesseurs (getters) permettent de définir la manière dont la valeur d'une propriété est obtenue, offrant la possibilité de traiter ou de manipuler la valeur avant de la retourner ;
  • Les mutateurs (setters) offrent un contrôle sur la mise à jour d'une propriété, permettant de valider ou de transformer les données avant de les affecter à un champ privé.

Protection des données

  • L'utilisation des getters et setters contribue à protéger l'état interne d'un objet en fournissant une interface contrôlée pour l'interaction ;
  • Les propriétés privées peuvent rester cachées, et seules les informations nécessaires peuvent être exposées au code externe.

Flexibilité

Les getters et setters permettent d'ajouter une logique supplémentaire—comme la validation ou la journalisation—lors de l'accès ou de la modification des propriétés, sans modifier la manière dont le code externe interagit avec l'objet.

Exemple : Compte utilisateur avec validation du mot de passe

Supposons que vous gériez des comptes utilisateurs où les mots de passe doivent respecter certaines normes de sécurité. À l'aide d'un setter, il est possible d'imposer la robustesse du mot de passe, tandis qu'un getter peut récupérer une version masquée du mot de passe à des fins d'affichage.


              
12345678910111213141516171819202122232425262728293031323334

            
class UserAccount {
  #password; // Private field

  constructor(username, password) {
    this.username = username;
    this.#password = password;
  }

  // Getter for password (returning a masked version)
  get password() {
    return '*'.repeat(this.#password.length); // Mask the password when retrieved
  }

  // Setter for password with validation
  set password(newPassword) {
    if (newPassword.length >= 8) {
      this.#password = newPassword;
    } else {
      console.log('Password must be at least 8 characters long');
    }
  }
}

const user = new UserAccount('nick_feather', 'secret123');

// Accessing the password using the getter (masked)
console.log(user.password); // Output: *********

// Setting a new valid password using the setter
user.password = 'strongPassword123';
console.log(user.password); // Output: ***************

// Trying to set an invalid password
user.password = '123'; // Output: Password must be at least 8 characters long
copy

Dans cet exemple, l'accesseur (getter) retourne une version masquée du mot de passe afin de dissimuler la valeur réelle, et le mutateur (setter) applique une validation, garantissant que le mot de passe comporte au moins 8 caractères.

Exemple avec logique de validation utilisant les accesseurs et mutateurs

Voici un autre exemple où l'on gère l'âge d'une personne et où l'on s'assure que la valeur reste dans une plage raisonnable :


              
12345678910111213141516171819202122232425262728293031323334

            
class Person {
  #age; // Private field

  constructor(name, age) {
    this.name = name;
    this.#age = age;
  }

  // Getter for age
  get age() {
    return this.#age;
  }

  // Setter for age with validation
  set age(newAge) {
    if (newAge > 0 && newAge < 120) {
      this.#age = newAge;
    } else {
      console.log('Invalid age');
    }
  }
}

const peter = new Person('Peter', 30);

// Accessing the age using the getter
console.log(peter.age); // Output: 30

// Setting a new valid age using the setter
peter.age = 35;
console.log(peter.age); // Output: 35

// Trying to set an invalid age
peter.age = 150; // Output: Invalid age
copy

Cet exemple illustre comment un setter peut garantir qu’un âge reste dans une plage valide, empêchant ainsi l’enregistrement de données invalides.

1. Quel est l’objectif principal de l’utilisation des getters ?

2. Dans le code suivant, quelle sera la sortie de console.log(user.password); ?

question mark

Quel est l’objectif principal de l’utilisation des getters ?

Select the correct answer

question mark

Dans le code suivant, quelle sera la sortie de console.log(user.password); ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 1. Chapitre 9
some-alt