JavaScriptの三項演算子に関する、どうでもいいメモ書き

例えばこんな文字列を出力したいとする。

const isInvalid = true;
`is invalid: ${isInvalid ? true : false}`

結果は下記のような文字列となる。

is invalid: true

だが、下記のようにすると、結果は true となる。

const isInvalid = true;
"is invalid: " + isInvalid ? true : false

// true

例えば下記のように文字列とbooleanを + で足しても文字列とbool値が結合されて出てくるので、一瞬上の挙動はおかしいのでは？と錯覚するが、

"is invalid: " + true
// is invalid: true

実際には "is invalid: " + isInvalid という結果に対して判定が行われているだけである。

const isInvalid = true;

// ()内の値に対して判定が行われる。この場合、空の文字列ではないため `true` と判定され、 結果として `true` が変えるという挙動になる。
("is invalid: " + isInvalid) ? true : false

つまり、意図しない（と勘違いした）結果になってしまった場合の書き方を以下のように変えると、想定した値が返ってくる。
（一番最初に書いた記述の、テンプレートリテラルを用いていないバージョンといった形になる）

const isInvalid = true;
"is invalid: " + (isInvalid ? true : false)

// is invalid: true

以上、ちょっとしたメモ書きでした。

at backyard