L'opérateur set

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

La syntaxeset permet de lier une propriété d'un objet à une fonction qui sera appelée à chaque tentative de modification de cette propriété.

Exemple interactif

const language = {  set current(name) {    this.log.push(name);  },  log: [],};language.current = "EN";language.current = "FA";console.log(language.log);// Expected output: Array ["EN", "FA"]

Syntaxe

{set prop(val) { . . .}}{set [expression](val) { . . .}}

Paramètres

prop: Le nom de la propriété à lier à la fonction.
val: Un alias pour la variable qui contient la valeur qu'on souhaiterait affecter àprop.
expression: Avec ECMAScript 2015, il est également possible d'utiliser des expressions pour utiliser un nom de propriété calculé à lier à la fonction.

En JavaScript, un mutateur (ousetter en anglais) peut être utiisé afin d'exécuter une fonction à chaque fois qu'on souhaite modifier la valeur d'une propriété donnée. La plupart du temps, les mutateurs sont utilisés avec les accesseurs (getters) afin de créer une pseudo-propriété. Il n'est pas possible d'avoir à la fois un mutateur et une valeur donnée pour une même propriété.

On notera queset :

peut avoir un identifiant qui est soit un nombre soit une chaîne de caractères
doit avoir exactement un paramètre (voir l'article «Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments » (en anglais) pour plus d'informations)
ne doit pas apparaître dans un littéral objet qui possède un autreset ou une autre propriété avec la même clé :({ set x(v) { }, set x(v) { } } et{ x: ..., set x(v) { } } seront interdits)

On peut retirer un mutateur d'un objet grâce à l'opérateurdelete.

Exemples

Définir un mutateur sur de nouveaux objets avec un littéral objet

Dans l'exemple qui suit, on définit une pseudo-propriétécourant pour un objeto qui, lorsqu'elle recevra une valeur, mettra à jour la propriétélog avec la valeur reçue :

var o = {  set courant(str) {    this.log[this.log.length] = str;  },  log: [],};

On notera quecourant n'est pas défini. Toute tentative pour y accéder renverraundefined.

Supprimer un mutateur grâce à l'opérateur`delete`

Si on souhaite retirer un mutateur, on peut simplement utiliser l'opérateurdelete :

delete o.courant;

Définir un mutateur sur un objet existant avec`defineProperty`

On peut également ajouter un mutateur sur un objet d'ores et déjà créé. Pour cela, on utilisera la méthodeObject.defineProperty().

var o = { a: 0 };Object.defineProperty(o, "b", {  set: function (x) {    this.a = x / 2;  },});o.b = 10; // On utilise le setter, qui affecte 10 / 2 (5) à 'a'console.log(o.a); // 5

Utiliser un nom de propriété calculé

var expr = "toto";var obj = {  bidule: "truc",  set [expr](v) {    this.bidule = v;  },};console.log(obj.bidule); // "truc"obj.toto = "bidule"; // le mutateur est utiliséconsole.log(obj.bidule); // "bidule"