get / set
Propriétés calculées à la lecture (get) et gérées à l’écriture (set).
Exemple
#const student = {
firstName: 'Léa',
lastName: 'Martin',
get fullName() {
return `${this.firstName} ${this.lastName}`
},
set fullName(value) {
const [first, last] = value.split(' ')
this.firstName = first
this.lastName = last
}
}
console.log(student.fullName)
student.fullName = 'Emma Bernard'
console.log(student.firstName)Définition et utilisation
#Les getters et les setters permettent de définir une propriété qui ressemble, de l’extérieur, à un champ ordinaire, mais qui appelle une fonction en coulisses. Un getter (get) calcule une valeur à chaque lecture, et un setter (set) réagit à une affectation.
Un getter est parfait pour une valeur calculée à partir d’autres champs, par exemple fullName à partir du prénom et du nom. Un setter permet de vérifier ou de transformer la valeur affectée avant qu’elle n’atteigne l’objet.
On stocke généralement les données dans un champ séparé (souvent avec un trait de soulignement ou un # privé), car un setter qui écrirait dans la même propriété s’appellerait lui-même indéfiniment.
Syntaxe
#const obj = {
get nom() { … },
set nom(value) { … }
}Plus d’exemples
#class Player {
#level = 1
get level() {
return this.#level
}
set level(value) {
if (value < 1) throw new RangeError('Le niveau doit être positif')
this.#level = value
}
}
const player = new Player()
player.level = 5
console.log(player.level)
try {
player.level = 0
} catch (error) {
console.log(error.message)
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Un getter ne devrait avoir aucun effet de bord ni effectuer de calculs coûteux, car il ressemble à une simple lecture de champ.
- Gardez les données derrière un setter dans un autre champ, par exemple un
#levelprivé, sinon le setter s’appellera lui-même.
Entrées associées
#- classDéfinit une classe, c’est-à-dire un modèle pour créer des objets avec les mêmes champs et méthodes.
- thisMot-clé qui désigne l’objet sur lequel une fonction a été appelée.
- Object.freeze()Gèle un objet, en bloquant l’ajout, la suppression et la modification de ses propriétés.
- #champLes champs et méthodes préfixés par # sont privés : seul le code à l’intérieur de la classe peut y accéder.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.