論理演算子「&&」や「||」の挙動について理解する

はじめに

初学者向けの記事となっております。
本記事ではJavaScriptを用いて説明します。他言語とは実際の挙動が異なる可能性があります。あらかじめご了承ください。

true && hoge() はどうなる？

突然ですが、以下のコードをご覧ください。

function hoge() {
  console.log("hoge")
  return 123;
}

const result1 = true && hoge()
const result2 = false && hoge()
const result3 = true || hoge()
const result4 = false || hoge()
const result5 = true && hoge() && false
const result6 = false || hoge() || true

これらの変数には何が入るでしょうか？またどのような処理が行われるでしょうか？
"hoge"という文字列が出力され、最終的に 123 という数値を返す hoge 関数を用意し、その後、論理演算子を使用して各々変数に入れる処理が書かれています。
このコードを読む上で引っ掛かる要素としては、

1. 関数を論理演算子と一緒に使用していること
2. hoge は論理値（Boolean）ではない

あたりになるのかなと思います。このコードを読み解くためには truthy・falsy の理解、そして 論理演算子の挙動 の理解が必要になります。

truthy、falsyについて

truthy、falsy について、MDNで以下のように記述されています。

JavaScript において、真値 (truthy) は論理値のコンテキストに現れた時に true とみなされる値のことです。偽値 (falsy) として定義された値 (つまり、false, 0, -0, 0n, "", null, undefined, NaN) を除くすべての値は真値です。

JavaScriptでは、false, 0, -0, 0n(Bigint), "", null, undefined, NaN の値は falsy な値、端的に言えば条件分岐で false と同じ挙動をとるようになっています。
逆に、falsy 以外の値は全て truthy となり、条件分岐で true 同じ挙動をとります。

例えば空の文字列 "" をif文で使用するとelse句の方が実行されると思います。

// F12キーを押して、検証ツールの中にある"コンソール"タブの中で試してみてね！
if ("") console.log("空文字はif文を通らない！")
else console.log("falseと同じ挙動になるよ！")

少し脱線すると、if というのは truthy か falsy かどうかで判断しているということになりますね。

論理演算子の挙動

truthyな値、falsyな値についての理解ができたと思うので、ここから論理演算子の挙動について説明しようと思います。

論理演算子は、与えられた値を一つずつみて truthy な値なのか、 falsy な値なのかを判別しています。

さらに、「&&」と「||」はそれぞれ異なる動きをしています。

||	&&
前の値が falsy な値である場合次の値を見にいく もし truthy な値であった場合はその時点の値を返す 一番最後の値まで来たときはその値を返す	前の値が truthy な値である場合次の値を見にいく もし falsy な値であった場合はその時点の値を返す 一番最後の値まで来たときはその値を返す

一つずつ値を検証し、使用する論理演算子によって返す値が変わります。
実際にどのような挙動をするのか、サンプルコードを用いて説明していきます。

// 左から順番に値を見ているよ、ここでは0は falsy な値、それ以外は全て truthy な値
const result = true && "hoge" && 0 && true;
console.log(result); // ?

result に論理演算子を使用して値を初期化しています。
最終的に出力される値はどうなるでしょうか？

回答と解説

答えは 0 です！以下のような処理が行われます

1. true の後に「&&」が使用されているので、次の値へ
2. "hoge"の後に「&&」が使用されているので、次の値へ
3. 0 の後に 「&&」が使用されており、0 は falsy な値なのでこの値を返す
4. console.log(result) で、初期化された 0 を出力

だいぶ理解が深まったと思います！では、冒頭のコードをもう一度見てみます！

function hoge() {
  console.log("hoge")
  return 123;
}

const result1 = true && hoge()
const result2 = false && hoge()
const result3 = true || hoge()
const result4 = false || hoge()
const result5 = true && hoge() && false
const result6 = false || hoge() || true

今までと違う点は、関数を論理演算子と一緒に使用しているところにあると思います。
この場合、論理演算子が一つずつ見ていく時に 関数が実行される ようになっています。
そのことを踏まえた上で、これら変数に入る値の答えは、検証ツールのコンソール等でぜひ試してみてください。

つまるところ、論理演算子を使用することで、ある関数の実行が正常だった場合、次の処理に移る という処理を簡潔に書くことができます。

function hoge() {
  // ...処理を実行...
  if (status == SUCCESS) return true
  else return false
}

function message() {
  console.log("DONE!")
}

// hoge関数の実行が失敗すると、message関数は実行されない
hoge() && message()

参考文献