[JavaScript] 実は使えるようになっていた、論理積代入 (&&=)と論理和代入 (||=)とNull 合体代入 (??=)

1 min read読了の目安(約1600字

皆さんが待望していた(?)演算子が実は使えるようになっています!(ただし、IEは除く)
無くても困らないが、ちょっと助かったりするそんな演算子たち。
早速どんな機能なのかをサッと確認していきましょう。

論理積代入 (&&=)

論理積代入 (x &&= y) 演算子は、x が truthy である場合にのみ代入します。

let truthy = true;
let falsy = false;

truthy &&= false; // => false
falsy &&= true; // => false

ちなみに、truthyな値とはfalsyな値以外のことを指します。
0""(空文字)、falseNaNnullundefinedはfalsyって覚えておけば、ほぼ大丈夫です。

論理和代入 (||=)

論理和代入演算子 (x ||= y) は、x が falsy である場合にのみ代入します。

let truthy = true;
let falsy = false;

truthy ||= false; // => true
falsy ||= true; // => true

論理和演算子(||)の短略評価を利用した、値を代入するやつが若干スッキリしますね!

// val => ""
const val = val || "default" // => valに"default"が代入される
const val ||= "default" // => 上記と同じ結果

Null 合体代入 (??=)

Null 合体代入 (x ??= y) 演算子は、x が nullish (null または undefined) である場合にのみ代入を行います。

let nullish1 = null;
let nullish2 = undefined;
let truthy = true;
let falsy = false;

nullish1 ??= "nullish"; // => "nullish"
nullish2 ??= "nullish"; // => "nullish"
truthy ??= "nullish"; // => true
falsy ??= "nullish"; // => false

論理和代入のスコープが狭まった感じですね。
nullishである場合にのみ代入されるってのを上手く使える場面で使用していきましょう。

// val => null 
const val == null ? "" : val; // => ""
const val ??= ""; // => 上記と同じ結果

参考

https://developer.mozilla.org/ja/docs/Web/JavaScript