JavaScriptで三項演算子を使用する際の注意点！

JavaScriptで三項演算子を使用する際の注意点！:

問題

こういったjsファイルの記述をif文から三項演算子で一文にしたい。

message.js 
 
var imagefile = ''; 
if (message.image.url) { 
imagefile = `<img src="${message.image.url}", class = 'lower-message__image'>`; 
} 

解答

var imagefile = message.image.url? `<img src="${message.image.url}", class = 'lower-message__image'>` : ""; 

<読みやすいように改行すると、こう>

var imagefile = message.image.url?  
`<img src="${message.image.url}", class = 'lower-message__image'>` : ""; 

注意するポイント

元々のjsファイルではtrueしか記述していない、

jsファイルはこれでも動くことができる。

だがしかし、

三項演算子の場合だと　必ずtrueを表す「?」 とelseを表す「:」 がいる

今回の問題の場合、

trueの時は処理をimgの表示

elseの時は何もしないようにしたかった。

そのため、else　　すなわち「:」以下を、 ""　　とした。

つまり、

もし message.image.urlがあるならimgタグを使用する。

ない場合は、""を返す。

という式になる。