はじめに

開発をしていたら、論理演算子を使ったコードに出くわしたのですが、すぐに理解できず凹んだので、次回からサッと解読できるように備忘録を残しておこうと思います！

出会ったコード

以下のようなコードです。

return !functionA() || !functionB() && functionC();

ここでfunctionA, functionB, functionCはそれぞれBooleanを返す関数だとします。

考え方

このコードはJavaScriptの演算子の優先順位に基づいて評価されます。

&& は || よりも優先順位が高いため、!functionB() && functionC()をグループ化できます。
つまり、このコードは以下のように書き換えることができます。

return !functionA() || ( !functionB() && functionC() );

このように考えると一気に視覚的にわかりやすくなりました。

簡単に補足

短絡評価

- || の場合、左側がtrueなら、その時点で結果が確定するため右側は評価されません
- &&　の場合、左側がfalseなら、その時点で結果が確定するため右側は評価されません

これを踏まえてコードをみていきます。

`!functionA()`がtrueになるなら

この時点でこのreturn全体はtrueを返すため、右側を見る必要はありません。

`!functionA()`がfalseになるなら

!functionB() && functionC()を見ていきます。
!functionB()がfalseなら、この時点でreturn全体はfalseを返すため、右側を見る必要はありません。

動作確認用コード

こちらで実際の動きを確認できます。

function functionA() {
  return true;
}

function functionB() {
  return false;
}

function functionC() {
  return true;
}

console.log(!functionA() || !functionB() && functionC());

まとめ

演算子の優先順位を正しく理解することが大切
難しく考えすぎず、わからなかったら優先順位の通りに()を補って読んでみると理解しやすくなる

これで次からはきっと大丈夫です！