はじめに
短絡評価という言葉を聞いたことはありますか？
JavaScriptの||演算子が絡む条件文で、この特性を理解しておらず、意図しない結果になってしまったことがあります。
実際のコード例を通して、||の挙動や、これにまつわるドモルガンの法則などを解説します。
私と同じようなプログラミング初心者の方の参考になれば嬉しいです。
自己紹介
私は2023年9月1日にフロントエンドエンジニアとして自社開発のSaaS企業に入社しました。
未経験独学で、薬剤師からの転職です。
詳しくはこちらをご覧ください。
具体例で説明
背景
実務で条件の判定に関してリファクタすることになり、元のコードをもとにどのように書くかを検討していました。
元のコードと同じ意味になるように書き換えたつもりでしたが、実際は意味が変わってしまい意図しない挙動になってしまいました。
問題
こちらが元のコードです。
!['野球部', 'サッカー部'].includes(user.club)
user.clubが['野球部', 'サッカー部']に含まれていたら真です。
!で打ち消しているため、全体としてはuser.clubが野球部またはサッカー部ではない場合に真となります。
これと同じ意味になるように、includesを使わずに書く方法を考えてみました。
user.club !== ('野球部' || 'サッカー部')
一見良さそうではないですか？
||(論理和）を使って、「野球部またはサッカー部ではない場合に真となる」が表現できていそうです。
しかし、これ大間違いです。
プログラミングに慣れている方でしたら、違和感と間違いにすぐ気づくと思います。
このままだと、user.clubが野球部の場合は問題なく偽と判定されるのですが、user.clubがサッカー部の場合に真になってしまい、条件を満たさなくなってしまいます（user.club === 'サッカー部'のときfalseにならない）。
短絡評価の罠
この理由は、||が短絡評価だからです。
短絡評価の場合、||の左側がtrueの場合は、右側の値を見る(評価する)必要はないため、右側の値を評価せずにそこで終了します。
今回の場合、'野球部'は文字列なので、常にtrueと判定されます。
よってそこで判定が終了し、右側の'サッカー部'は評価されることがありません。
短絡評価ということを忘れ、user.clubが||の左右両方の項にかかってくると思いこんで書いてしまっていました。これでは同じ意味になりません😢
解決
ではどのように書けば良いのでしょうか。
愚直に条件を書きましょう。
以前学んだドモルガンの法則も使って2種類の書き方で書いてみます。
user.club !== '野球部' && user.club !== 'サッカー部'
!(user.club === '野球部' || user.club === 'サッカー部')
これで!['野球部', 'サッカー部'].includes(user.club)と同じ、野球部またはサッカー部ではない場合に真という条件になりました。
終わりに
結局、書き換えの案を考えましたが、元のコードの方がわかりやすかったので変更しないことになりました。同じ意味でも色々なアプローチの仕方があるのは面白いです。
||は短絡評価ということを知識として知っていても、実際にコードを書いてみると理解できていないなと感じることが多々あります。知識が身につくまで、繰り返し書いていくしかないですね！
今回、条件に使う値を実際の実務よりも簡単な値に置き換えて記事を書きましたが、簡単な文字列に置き換えてみると文法が理解しやすいと思いました。置き換えてテクニックは実務に活かすとコードの見通しが良くなりそうなので、使ってみようと思います。