JavaScriptの論理演算子の挙動

論理演算子(&&,||)について

Reactを学ぶ上でJavaScriptの論理演算子(&&,||)について、いまいち挙動を理解できていなかったので覚えたことをアウトプットします。

論理演算子(&&,||)の挙動

&&の左辺がtrueの場合、右辺を実行します。

1 + 1 === 2 && console.log("正解"); //console.logが実行される

&&の左辺がfalseの場合、右辺は実行されません。

1 + 1 === 20 && console.log("正解"); //console.logが実行されない

||は左辺がtrueの場合、左辺が実行されます。このような処理を選択的代入と呼ぶそうです。

const hoge = fuga || "default"; //左辺がtrueならhogeにはfugaが、falseなら"default"が代入される

挙動の詳細

true && true // true
true && false // false
false && true // false
false && false // false

true || true // true
true || false // true
false || true // true
false || false // false

&&は左辺がfalseなら、||は左辺がtrueの場合は左辺を評価しただけで右辺の処理を省ける場合が存在します。
このような処理のことを短絡評価と呼びます。

falseとみなすことができる値

• 0
• -0
• null
• false
• NaN
• undefined
• 空文字列("")

trueは上記以外のものすべて。

おまけ(三項演算子)

三項演算子x ? y : zを使えば、条件分岐が可能です。

1 + 1 === 20 ? console.log("正解") : console.log("不正解"); //?の左辺がtrueなら:の左辺が、falseなら右辺が実行される

まとめ

自分の中では&&と||はAND ORと読み替えて必ずtrueorfalseを返す演算子だと思っていました。
実際は両辺のどちらかの値を返すという挙動をしていました。

参考文献

ほぼ丸パクリみたいなものですが参考にさせていただきました。