IF文の省略？構文が良く分からない

質問

下記のnull!==e&&(e.innerHTMLはどう理解すればいいのでしょうか？
IFの省略でもないようなのですが、、、
displayResult:function(t){
let e=document.getElementById("result");
null!==e&&(e.innerHTML=t,e.style.display="block")
}

処理自体は下記と同じかと思いますが、ショートハンドでも詳しく知りたいと思っています。ぜひ宜しくお願い致します。
(function(t){
let e=document.getElementById("result");
if(e){
e.innerHTML=t;
e.style.display="block";
}
})(aaa);

回答No.1

asciiz · ベストアンサー

＞null!==e&&(e.innerHTML=t,e.style.display="block")

こちらの部分、いきなり演算子の優先順位を覚えてなければいけないのですが、「!==」(厳密不等価)は「&&」(論理AND)よりも強く結びつきます。
※私も覚えてなかったので確認しました

なのでご質問の式に括弧をつけてわかりやすくすると
(null!==e)&&(e.innerHTML=t,e.style.display="block")
という式となっています。

さて、「&&」は 論理AND ですが、「&」 の ビットAND と違うのは、
・前から評価する
・評価値「偽」が出たならば、「偽」を返して残りの部分は評価しない
という点です。

なので、「A && B」と書かれた場合、AとBのそれぞれの真偽値を調べてから総合的にANDを取る、のではなく、
「Aが偽(0)ならば、偽で評価終了(Bを評価する意味がないため)。
そうでなければBを評価し、その真偽値となる」
という、ショートカット動作をします。

そしてカンマ演算子は、単純にカンマで区切られた式を順番に評価し、最後の式の値を返します。
つまり単純に言えば、全ての式を実行します。
※演算子であるので、カンマで区切られるものはすべて値・関数・式でなければなりません(ifやforといったステートメントを書けない)

最終的に、その式全体で真または偽となりますが、その結果は利用されるでもなく、保存されるでもなく、破棄されます。

ということで、最初の式を正確にif文で展開すると

if (null !== e) {
e.innerHTML=t;
e.style.display="block";
}

と同じ動作をする、ということになります。
まあ結局、あなたがご質問に書かれたif文展開と、ほぼ同値です。(「if(e)～」とでは、e が 0 の時に動作が違いますが、前の代入式で0が入ることはあり得ませんし。)

--

現代ではソースの短さより読みやすさ・わかりやすさを優先すべきかと思うので、あまりしない書き方だと思います…。

お礼

読み解くには高い知識が要るコードだったのですね。
大変参考になりました。ありがとうございました。