論理積(&&)の罠
はじめに
JavaScriptで論理演算子を利用した評価を行った際の挙動について気になったことがるので備忘録として残す。仕様を理解していないと意図しない結果を招くこともあるので、&&（AND演算子）の挙動についてコードも交えつつ解説できたらなと。
サンプルコード
以下のようなコードがあったとします。
const Home = () => {
const number = 0;
return <div>{number && <div>hello</div>}</div>;
};
export default Home;
このコードでは、numberの値として0が設定されています。そして、number && <div>hello</div>という表現が使われています。
問題の発生
上記のコードを実行すると、画面には0が表示されてしまいます。
何も表示されないような気がしていたんですが、0が表示されてしまいました。
JavaScriptのTruthyとFalsy
MDNから引用
短絡評価
論理積の式は短絡演算子です。 各オペランドが論理値に変換されるとき、ある変換結果が false であった場合、論理積演算子は停止してその偽値のオペランドの元の値を返します。残りのオペランドは評価されません。
JavaScriptでは、全ての値はtruthy（真として評価される値）かfalsy（偽として評価される値）のどちらかとなります。以下がfalsyな値の一覧です。
- false
- 0
- -0
- 0n（BigIntの0）
- ""（空文字列）
- null
- undefined
- NaN
これ以外の値はすべてtruthyとなります。
このため、上記のコードではnumberが0（falsy）であるため、&&演算子の評価が左側で止まり、<div>hello</div>は評価されず、そして0が出力されるのです。
修正
この問題を解決するためには、三項演算子を使用します。
const Home = () => {
const number = 0;
return <div>{number ? <div>hello</div> : null}</div>;
};
export default Home;
個人的には少し記述が増えても三項演算子を使用するほうが確実かなと思います。
まとめ
JavaScriptの論理演算子を用いた評価には、TruthyとFalsyという重要な概念がある。これを理解せずにコードを書くと、予想外の結果を生む可能性があるので注意が必要だなと実感。
特にReactのレンダリングなどに使用する際には、予期しない値が表示される可能性があるため注意！！
参照
Discussion