【JavaScript】&&と||の本当の意味

突然ですが、このJSの挙動はどうなると思いますか？

const a = 1;

const sayHello = () => console.log("Hello");
const sayHi = () => console.log("Hi");

a > 0 && sayHello();
a > 0 || sayHi();

正解された方は海より深く理解しておられます！
私なんかの解説をお聞かせするまでもございませんので、この記事はスキップして未来へとお進みください。

もくじだよ

&&と||の正体
なぜこうなるのか
if文でよく使うこの構文

&&と||の正体

「？」となった方、「&&→かつ、||→または、じゃないの？」と思った方（私もそうでした）は、もう少しお付き合いいただけると、ちょっぴりハッピーになれるかもしれません。

では、正解です！

予想通りでしたか？

なぜこうなるのか

公式サイトの解説を見てみましょう。

論理積 (&&)
演算子 (論理結合) をオペランドの組み合わせに対して使用すると、すべてのオペランドが true である場合に true になります。一般的には Boolean (論理) 値で使用されます。その場合は論理値を返します。ただし && 演算子は実際には指定されたオペランドのうち一つの値を返すので、この演算子が論理値以外で使用された場合は、論理値以外の値を返すことになります。
expr1 && expr2
expr1が trueに変換できる場合はexpr2を返し、それ以外の場合はexpr1を返します。
論理和 (||)
論理和 (||) 演算子 (論理的分割) をオペランドの組み合わせに対して使用すると、オペランドのうち 1 つ以上が true である場合に true になります。一般的には Boolean (論理) 値で使用されます。その場合は論理値を返します。ただし || 演算子は実際には指定されたオペランドのうち一つの値を返すので、この演算子が論理値以外で使用された場合は、論理値以外の値を返すことになります。
expr1 || expr2
expr1が trueに変換できる場合はexpr1を返し、それ以外の場合はexpr2を返します。
引用元：MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR

つまり、こういう事です。

&&の場合
左側がtrueだったら右側を返し、左側がfalseの場合は左側を返す

||の場合
左側がtureだったら左側を返し、左側がfalseの場合は右側を返す

そして青マーカー部分に注目。
「この演算子が論理値以外で使用された場合は、論理値以外の値を返すことになります。」
論理値(true / false)以外の値も返してくれるんですね！

ということを踏まえて先程のJSを振り返ってみましょう。

const a = 1;

const sayHello = () => console.log("Hello");
const sayHi = () => console.log("Hi");

// 左側（a > 0）がtrueなので右側（sayHello() = 論理値以外の値）を返している → consoleにHelloと表示
a > 0 && sayHello();

// 左側（a > 0）がtrueなので左側（a > 0）を返している → consoleには何も表示されない
a > 0 || sayHi();

もし10行目でconsoleにHiと表示させたい場合は、左側をfalseにしてあげればOKです。
例えばa < 0ですね。

if文でよく使うこの構文

よく見かけるこのようなif文では「&&→かつ、||→または」が成り立ちますね。

ではこちらも深掘りしてみましょう。

const a = 3;
const b = -2;

// 左側（a > 0）がtrueなので、右側（ b > 0）を返す。
// b > 0 はfalseなのでfalseを返す。
// 結果 false となるのでconsoleにHelloは表示されない。
if(a > 0 && b > 0) {
  console.log('Hello');
}

// 左側（b > 0）がfalseなので、右側（a > 0）を返す。
// a > 0 はtrueなのでtrueを返す。
// 結果 true となるのでconsoleにHiと表示される。
if( b > 0 || a > 0) {
  console.log('Hi');
}

いかがでしたでしょうか？
比較する対象が増えても同じ考え方で解決できます。
もしif文で意図した挙動にならない時は、この性質を思い出していただけると、ちょっぴりハッピーになるかもしれません。

もしこの記事が良かったと思っていただけたましたら、SNSボタンからシェアしてくださると嬉しいです。