はじめに
論理演算子（&&・||）の意味を勘違いしていた部分があったのでまとめます。
論理演算子&&・||について
まずは&&・||についておさらい。
&&（論理積/AND）
左から順に値を評価し、最初にfalsyな値を見つけた場合はその値を返す。すべてtruthyな値の場合は、最後の値を返す。
||（論理和/OR）
左から順に評価し、最初にtruthyな値を見つけた場合はその値を返す。すべてfalsyな値の場合は、最後の値を返す。
勘違いしていたところ
&&・||を「かつ」「または」で理解していたため、返ってくる値が真偽値だと思っていました。ただこれは間違いで、&&・||は評価した値を返します。
console.log(0 && 1); // 0
console.log(0 || 1); // 1
この挙動はJavaScriptを含む動的型付け言語特有で、JavaやCなどの静的型付け言語ではtrue/falseを返すようです。
論理積（&&）が値を返す条件
論理積は以下の順で値を返します。
- 左側の値を評価
- 左側の値がfalsyならそれを返す（右側の値は評価しない）
- 左側の値がtruthyなら右側の値を評価して返す（左右ともtruthyなら右側の値を返す）
// 左側がfalsyの場合
console.log(0 && 1); // 0
console.log("" && "hoge"); // ""
console.log(false && true); // false
// 左側がtruthyの場合
console.log(1 && ""); // ""
console.log("hoge" && false); // false
console.log(true && 0); // 0
// 左右両方がtruthyの場合
console.log(1 && "1"); // "1"
console.log("hoge" && "fuga"); // "fuga"
console.log(true && "false"); // "false"
// 複数つなげた場合
console.log("" && "hoge" && "fuga"); // ""（最初の空文字がfalsyなので""が返る）
console.log(1 && 2 && 3); // 3（全てtruthyになるので最後の3が返る）
console.log("1" && 0 && 3); // 0（真ん中の0がfalsyになるので0が返る）
論理和（||）が値を返す条件
論理和は以下の順で値を返します。
- 左側の値を評価
- 左側の値がtruthyならそれを返す（右側の値は評価しない）
- 左側の値がfalsyなら右側の値を評価して返す（左右ともfalsyなら右側の値を返す）
// 左側がtruthyの場合
console.log(1 || 0); // 1
console.log("hoge" || ""); // "hoge"
console.log(true || false); // true
// 左側がfalsyの場合
console.log(0 || "0"); // "0"
console.log("" || 1); // 1
console.log(null || true); // true
// 左右両方がfalsyの場合
console.log("" || 0); // 0
console.log(null || false); // false
console.log(false || ""); // ""
// 複数つなげた場合
console.log(1 || 2 || 3); // 1（最初の1がtruthyな値なので1が返る）
console.log(0 || null || false); // false（全てfalsyな値なのでfalseが返る）
console.log("" || 10 || 0); // 10（真ん中の10がtruthyな値なので10が返る）
trusyな値とfalsyな値について
JavaScriptの全ての値はtruthyかfalsyに分けられます。
論理積（&&）と論理和（||）は値を評価してtruthyかfalsyかで返す値を決めます。
trusyな値とfalsyな値については以下の記事で詳しく書いています。
おわりに
論理積（&&）と論理和（||）が単純な「かつ」「または」ではないことと返す値が真偽値ではなくtruthyかfalsyなのかの違いを理解できました。
参考