ヌル合体代入演算子（??=）のMDNの記述について

Question

Logical nullish assignment (??=) - JavaScript | MDN

↑こちらについて、

ヌル合体代入演算子の短絡評価は、つまり x ??= y が次の式と等価であることを意味します:

x ?? (x = y);

そして、次の式とは必ずしも等価になるとは限りません：

x = x ?? y;

という記述があります。（当方による勝手訳）

この後段について等価とならないケースがイメージできないので、教えてください。
セッタが評価されるかどうか、ということなのかな？　とは思ったのですが、正しいでしょうか？
その他のケースも考えられますか？

Answer 1

xが単なる変数なら違いはなさそうですが、セッターのあるプロパティにa.b ??= 5;のようにした場合、セッターの実行回数が違ってくる、ように思われます（ちょっと自信はないです）。

Comments

[Lhankor_Mhy]

やはりですか。
セッタの実行回数が大きな影響を与えるようなケースを思いつかなかったので、あまり気にすることはないですかね……？

[maisumakun]

文法的には実装できますけど、「セッターが副作用を持つ」ようなオブジェクトは（デバッグ出力を行う程度なら別ですが）むしろ嫌がらせに近い存在でしょうしね…

[Lhankor_Mhy]

いろいろググってたらこんなのが。
https://v8.dev/features/logical-assignment

なるほど、innerHTMLね、と思いました。
というか、DOMのプロパティは副作用が多そうなので、他にも何かあるかもしれません。

[maisumakun]

> DOMのプロパティは副作用が多そうなので

参照だけでリフローがかかる寸法系プロパティとか、けっこうな魔境ですね。

Answer 2

それでいいのでは？

セッタが評価されるかどうか、ということなのかな？

Comments

[x_x]

わたしも仕様を追っているわけではないのでそうだろうなーとしか言えません。
最近はろくにログインすらしてないので、たまたま回答依頼に気づいて答えています。
think49 さんが的確な回答をしてくれるのではないかと期待しています。

[Lhankor_Mhy]

ありがとうございます、お呼びだてして失礼しました。
（一応、ログイン時間は確認したつもりでした）
他の方の回答をもう少しお待ちしたいと思います。

Answer 3

リンク先にある "And not equivalent to the following which would always perform an assignment:" は、「常に代入を行う次のもの (x = x ?? y;という文) とは異なります」という意味と思われるので、

x = x ?? y;

は、xがnullかundefinedでなければxにxが代入されますが、
??= を使用する場合はxにxを代入するなんてことはしない、という意味ではないでしょうか。

Comments

[Lhankor_Mhy]

ありがとうございます。おっしゃるとおりかと思います。

Answer 4

CoffeeScriptやRubyにはかなり昔からあったので、私は何の疑問も思わないのですが、代入の評価という物を考えると違いがはっきりします。

現在の所、対応ブラウザのバージョンは開発版しかないようなので、CoffeeScriptでやってみます。

obj =
  get: 0
  set: 0
  _x: undefined
  reset: ->
    this.get = 0
    this.set = 0
    this._x = undefined
Object.defineProperty obj, 'x',
  get: ->
    this.get++
    this._x
  set: (val) ->
    this.set++
    this._x = val

obj.reset()
obj._x = undefined
obj.x ?= 1
console.log obj.get, obj.set

obj.reset()
obj._x = 0
obj.x ?= 1
console.log obj.get, obj.set

obj.reset()
obj._x = undefined
obj.x = obj.x ? 1
console.log obj.get, obj.set

obj.reset()
obj._x = 1
obj.x = obj.x ? 1
console.log obj.get, obj.set

2番目だけsetがカウントされません。

CoffeeScriptなんてマイナーなAltJSは知らない！という人のためにECMAScriptで書き直しました。

const obj = {
  get: 0,
  set: 0,
  _x: void 0,
  reset: function() {
    this.get = 0;
    this.set = 0;
    this._x = void 0;
  },
  get x() {
    this.get++;
    return this._x;
  },
  set x(val) {
    this.set++;
    return this._x = val;
  }
};

obj.reset();
obj._x = void 0;
obj.x ??= 1;
console.log(obj.get, obj.set);

obj.reset();
obj._x = 0;
obj.x ??= 1;
console.log(obj.get, obj.set);

obj.reset();
obj._x = void 0;
obj.x = obj.x ?? 1;
console.log(obj.get, obj.set);

obj.reset();
obj._x = 1;
obj.x = obj.x ?? 1;
console.log(obj.get, obj.set);

Babelで変換して実行すれば、同じ結果が得られるのが分かると思います。

なお、tc39にあるこの機能の提案に書いてあるとおり、Ruby(2003年の1.8.0には既にあった、というより1995年の初期リリースからかも？)、CoffeeScript(2010年の0.2.6から)、C#(2019年の8.0から)の機能を参考にしています。プロパティに対するゲッターとセッターがメソッドではなく参照と代入として書くスタイルの言語では特に新しくもなんともない機能です。

Comments

[Lhankor_Mhy]

ありがとうございます。Babelでは同様のことを試していましたが、そういうことなのか確信が持てず。
やはりそういうことなんですね。

Answer 5

x ?? (x = y);

これは単にx ?? yをしつつ、xにyを代入しているだけです

Comments

[maisumakun]

??演算子はショートサーキットなので、xがnullishでない場合は代入は行われません。