JavaScript Null合体演算子と三項演算子の同時使用時の計算の優先順位（まあ今回は優先順位関係ないのですが…）

以下みたいなやつ、なんか初見でぱっと見でcontainedとoutlinedがなにがおきたらどうなるのかわからなかった。Null合体演算子と三項演算子が同時に使われているの初めて見た。

condition1 ?? condition2 ? 'contained' : 'outlined'

condition1がtrueだったら結果はtrueなんじゃ？と初見で思ってしまって。そこでcondition1がundefinedもしくはnullじゃないとそれ以降評価されないと思ってしまっていた。

ja.javascript.info

developer.mozilla.org

結論、

(condition1 ?? condition2) ? 'contained' : 'outlined'

を表している。
（まあ最初から順に計算されていってるから今回は優先順位関係ないんですけどね。）

つまり、以下みたいな感じになる。

true ?? true ? 'contained' : 'outlined'
// つまり： true ? 'contained' : 'outlined'
// 結果：'contained'

false ?? true ? 'contained' : 'outlined'
// つまり：false ? 'contained' : 'outlined'
// 結果：'outlined'

true ?? false ? 'contained' : 'outlined'
// つまり：true ? 'contained' : 'outlined'
// 結果：'contained'

false ?? false ? 'contained' : 'outlined'
// つまり：false ? 'contained' : 'outlined'
// 結果：'outlined'

undefined ?? true ? 'contained' : 'outlined'
// つまり：true ? 'contained' : 'outlined'
// 結果：'contained'

undefined ?? false ? 'contained' : 'outlined'
// つまり：false ? 'contained' : 'outlined'
// 結果：'outlined'