javascriptにおける論理積、論理和を用いて書いた疑似if文を許すべきか否か

はじめに

最近Reactの勉強をしている最中にjavascriptの論理積、論理和を用いて端的にif文みたいなのを書く方法を知った。なぜそうなるのか分からなかったので原理を調べてみたのと、それを理解した上でこれを使って良いのかについて考えていきたい。

javascriptにおける論理積と論理和

javascriptでは論理積と論理和は真偽値だけを返すものではなく、オペランドの左右のオペランドのどちらかを返すものです。他の静的型付言語では真偽値に対して使うことが多いですが、javascriptではいろいろ扱えるので結果的に真偽値以外のものが返せるということになっているのだと思います。要するにオペランドそのものまたは返り値がboolean型だった場合boolean型を返しますが、違う型だった場合はそれを返す可能性があるということです。

論理積では左辺がtrueでない場合は右辺に関係なくfalseなので右辺は実行せずに左辺を返します。逆に左辺がtrueの場合右辺の結果がそのまま論理積の結果になるので右辺を返します。反対に論理和では左辺がtrueの場合は右辺をみる必要がないのでそのまま返してtrue。左辺がfalseの場合は右辺を返します。これを利用してコードの省略を行うべきなのかという点が今回の疑問点です。

実例

codesandboxでいろいろ試してみた。

let flag = true;
if(flag === true)
  document.getElementById("app").innerHTML = `<h1>Hello</h1>`;
else
  document.getElementById("app").innerHTML = `false`;

flagがtrueだった場合にはHelloを出力し、falseだった場合falseを出力します。flag==trueはflag&&trueでもいいですが、人間的にわかりやすいのはこちらの書き方でしょう。この書き方の問題点は、似たような文が２回出てきている点です。できれば省略したい。

let flag = true;
document.getElementById("app").innerHTML = flag &&`<h1>Hello</h1>`;

このプログラムは論理積演算子&&の性質を利用してHelloを出力するかどうかを短くまとめています。flagがtrueの場合Helloを出力、falseの場合はfalseを出力します。先程の文が１つにまとめられ文量的には見やすくなっています。

積極的に使っていくべきか

分かっていて使っているなら個人で利用する分には問題ない。ただチームで使う上ではわからない人がいたら怖いが、この程度は常識なのかもしれない。論理演算のもとの意味から外れてはいるが、これを用いることでコードが減り、見やすくなるなら使ってもいいとは思う。ただすべてこれで書くのはどうかと思う。意味が分かっており、それを使うことで十分なメリットを得られるなら使ってもよい。むやみやたらに使うものではない。しかし、そもそも3項演算子使えばよくないか？

2021/07/12追記：

let flag = true;
document.getElementById("app").innerHTML = flag? `<h1>true</h1>`: `<h1>false</h1>`;

3項演算子だとこんな風に書けます。

結論

僕は3項演算子使います。

参考文献

[1]:論理積 (&&)