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)やってます。フォローしてもらえるとうれしいです!