set

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

set 構文は、あるオブジェクトプロパティを、プロパティに設定しようとしたときに呼び出される関数に結びつけます。これはクラスでも使用できます。

試してみましょう

const language = {
  set current(name) {
    this.log.push(name);
  },
  log: [],
};

language.current = "EN";
language.current = "FA";

console.log(language.log);
// 予想される結果: Array ["EN", "FA"]

構文

js
{ set prop(val) { /* … */ } }
{ set [expression](val) { /* … */ } }

追加の構文上の制限がいくつかあります。

セッターの引数は正確に 1 個でなければなりません。

引数

prop

与えられた関数に結び付けられるプロパティの名前です。他のプロパティのオブジェクト初期化子と同じ方法で、文字列リテラル、数値リテラル、識別子のいずれかにすることができます。

val

prop に設定しようとする値を保持する変数のエイリアスです。

expression

算出プロパティ名の式を使用して関数に結び付けることもできます。

解説

JavaScript では、セッターは指定されたプロパティを変更しようとするたびに関数を実行するために使用されます。セッターは、多くの場合、ゲッターと組み合わせて使用されます。

オブジェクトのプロパティは、データプロパティかアクセサープロパティのいずれかであり、両方を同時に持つことはできません。詳細は Object.defineProperty() を参照してください。セッター構文を使用すると、オブジェクト初期化子内でセッター関数を指定することができます。

js
const obj = {
  set prop() {
    // セッター、obj.prop を設定する際に実行される
  },
}

この構文を使用して定義されるプロパティは、作成されたオブジェクトの自身のプロパティであり、構成可能かつ列挙可能です。

例

新しいオブジェクトにオブジェクト初期化子でセッターを定義

以下の例では、擬似プロパティ current を language オブジェクトに定義します。 current に値が代入されると、 log をその値で更新します。

js
const language = {
  set current(name) {
    this.log.push(name);
  },
  log: [],
};

language.current = "EN";
console.log(language.log); // ['EN']

language.current = "FA";
console.log(language.log); // ['EN', 'FA']

current は定義されておらず、あらゆるアクセスを試みてもその結果は undefined になることに注意してください。

クラス内でのセッターの使用

クラスインスタンスで利用できるパブリックインスタンスセッターを定義する際にも、まったく同じ構文を使用することができます。クラス内では、メソッド間をカンマで区切る必要はありません。

js
class ClassWithGetSet {
  #msg = "hello world";
  get msg() {
    return this.#msg;
  }
  set msg(x) {
    this.#msg = `hello ${x}`;
  }
}

const instance = new ClassWithGetSet();
console.log(instance.msg); // "hello world"

instance.msg = "cake";
console.log(instance.msg); // "hello cake"

セッタープロパティはクラスの prototype プロパティ上に定義されるため、そのクラスのすべてのインスタンスで共有されます。オブジェクトリテラル内のセッタープロパティとは異なり、クラス内のセッタープロパティは列挙可能ではありません。

静的セッターとプライベートセッターはよく似た構文を使用することができます。これらは static およびプライベート要素のページで説明しています。

delete 演算子によるセッターの削除

セッターを削除したい場合は、 delete で削除するだけです。

delete language.current;

defineProperty を使用して既存のオブジェクトにセッターを定義

既存のオブジェクトにセッターを追加するには、 Object.defineProperty() を使用してください。

js
const o = { a: 0 };

Object.defineProperty(o, "b", {
  set(x) {
    this.a = x / 2;
  },
});

o.b = 10;
// セッターを実行し、 10 / 2 (5) を 'a' プロパティに代入

console.log(o.a); // 5

算出プロパティ名の使用

js
const expr = "foo";

const obj = {
  baz: "bar",
  set [expr](v) {
    this.baz = v;
  },
};

console.log(obj.baz); // "bar"

obj.foo = "baz";
// セッターを実行

console.log(obj.baz); // "baz"