javascriptにおける、if文の()内の挙動について。

Question

前提・実現したいこと

検証環境：repl.itのNode.js環境（Node.js v12.16.1）

javascriptのif分の挙動についてご質問があります。
以下の2つの記述では実行される結果が違うのですが、その理由を知りたいです。

ソースコード

 if ( false === a[0] && true ){     
  console.log("test")  
}   
//ReferenceError: a is not defined

これは理解できます。aを定義していないので、test文字列は出力されません。
そこで、以下のようなif文も試しました。

 if ( false && true === a[0] && true ){     
  console.log("test")  
}   
//(何も出力されない)

この場合、なぜ、ReferenceError: a is not definedとならないのでしょうか？
false && trueの評価は、falseであるため、false === a[0]&&true　を比較したif文と結果は同じかと予想しておりましたが違っていました。

大変お手数ですが、こちらの理由をご教授いただけますと幸いです。

Answer 1

false && true === a[0] && trueの最初、falseの評価直後にfalse && true === a[0] && true全体の評価結果はfalseに決まります。
a[0]は（そしてtrue === a[0]もtrueも）評価されません。
短絡評価と言います。

Comments

[porie]

短絡評価について理解が深まり、今回の謎が解けました。
有難うございます！

Answer 2

論理演算子 - JavaScript | MDN

をご覧になればよくわかるかと。

勘違いされているのは、&&演算子は、論理値を返すわけではないということです。

上記ページにもある通り、&&演算子は、
左項がtrueになる場合、右項を評価するため、
今回の、false && true === a[0]は、
まずは左項がfalseのため、
右項の評価に移ることはなくfalseとなります。
つまり、その最右項の&& trueも評価されませんので、
式全体がfalseとなり、
if文内は実行されません。

そして、先述した、論理値を返すわけではないに関しては、下記を実行すればわかるでしょう。

const a = 1 && 25;
console.log(a); // 25

const b = 0 && 1;
console.log(b); // 0

となる通り、左項が真になる場合は、右項を返す、
左項が偽になる場合は、左項を返すのが、
&&演算子です。
それをうまく使うのが、両方が真である場合という条件を設定できるわけです。
その事を踏まえれば、今回の結果になることは理解できるかと思います。

というわけで、なぜ、
ReferenceError: a is not defined
が出ないのかというと、
そもそも、true === a[0]が評価されない（実行されない）からです。

Comments

[porie]

&&演算子の返す値についてそもそも誤解しておりました。
加えて、短絡評価についても失念しておりお恥ずかしい限りです。

大変わかりやすかったです。ありがとうございました。

Answer 3

false && true === a[0] && true

この質問を要約すると
「お前a変数が定義されているか否かなんて、静的解析時にわかるやろ、なんでエラーにならへんのや」
って事ですよね？

JSは現在のスコープに定義された変数が無ければ、
上のスコープに遡って取りに行きます。
最後はグローバル変数スコープまで探しに行きます。

それすらも何とかなるやろと思うかもしれませんが、
JavaScriptはブラウザ上でHTML文書とセットで動作する都合上、
上に追加したスクリプトタグでグローバル変数をいくらでも定義出来るわけです。

なので実行してみなければその変数があるかないかはわかりません。

---

ぽんとfalse && true === a[0] && trueを渡されても実行されるまではわからないわけです。
実際下記のようにすればエラーは出ません

var a = [true];
// 新しい変数スコープを作る為に即時実行関数を使う
(() => {
  if (true === a[0] && true) {
    console.log(a);
  }
})();
// [true]が表示されて正常終了

AND演算子は他の方が解説されているように、
左辺を評価して、trueっぽい値でなければ右辺は実行しません。

Comments

[porie]

ご回答ありがとうございます。
なるほど、「実行されるまでは存在がわからない」という点、とても腑に落ちました。
今回は短絡評価と&&演算子の挙動について誤解していたことが主因でしたが、大変勉強になりました。ありがとうございます。