【JavaScript】Null合体代入演算子(Logical nullish assignment operator)の基本

JavaScript

Null合体代入演算子（Logical nullish assignment operator）について

Null合体代入演算子（??=）とはvalue ??= defaultValueのように記述し、左辺（value）がnullishな値（nullもしくはundefined）の時は左辺（value）に右辺を代入（defaultValue）、そうでない時は左辺（value）がそのまま利用される演算子です。

value ??= defaultValueは、Null合体演算子(??)を利用したvalue = value ?? defaultValueや、三項演算子を利用したvalue = value != null ? value : defaultValueと同じ結果になります。

Null合体演算子(??)の詳細解説は【JavaScript】Null合体(Nullish coalescing)とオプショナルチェーン(Optional chaining)の基本で紹介しています。

Null合体代入演算子の利用例

Null合体代入演算子を利用したサンプルコードは以下の通りです。

const config = (options) => {
  options.duration ??= 100;
  options.speed ??= 25;
  return options
}

const defaultSetting = config({})
console.log(defaultSetting);
// { duration: 100, speed: 25 }

const highSpeedSetting = config({ speed: 200 })
console.log(highSpeedSetting);
// { duration: 100, speed: 200 }

Null合体代入演算子を利用せずに実装すると以下のようになります。
コードを比較してわかる通り、Null合体代入演算子を利用したほうがシンプルになります。

const config = (options) => {
  options.duration = options.duration != null ? options.duration : 100;
  options.speed = options.speed != null ? options.speed : 25;
  return options
}

const defaultSetting = config({})
console.log(defaultSetting);
// { duration: 100, speed: 25 }

const highSpeedSetting = config({ speed: 200 })
console.log(highSpeedSetting);
// { duration: 100, speed: 200 }

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考

RECOMMEND